用ajax上傳表單文件

Question

我想上傳文件並用jquery ajax將其保存在服務器上。我試過了，但沒有奏效。它不想處理它。這是我做的：

HTML代碼

<form action="" method="post" enctype="multipart/form-data"> 
     <input type="file" name="submit_file" id="submit_file" required > 
     <input type="text" name="submit_message" id="submit_message">   
</form> 
<a href="javascript:upload();" ><img src="img/join_btn.png" /></a> 

驗證和Ajax

<script type="text/javascript"> 
    function upload() 
    { 
     var $submit_file = $("#submit_file").val(); 
     var $submit_message = $("#submit_message").val(); 


     if($submit_file == '') 
     { 
      alert('please choose your picture'); 
      $('#submit_file').focus(); 
      //return false; 
     } 
     else if($submit_message == '') 
     { 
      alert('please write message'); 
      $('#submit_message').focus(); 
      //return false 
     } 
     else 
     { 
      uploadFile(); 
     } 
    } 
</script> 

<script type="text/javascript"> 
    function uploadFile() 
    { 
     var $submit_file = ''; 
     var $submit_message = ''; 

     if($("#submit_file").val()) {$submit_file = $("#submit_file").val()}; 
     if($("#submit_message").val()) {$submit_message = $("#submit_message").val()}; 

     $.ajax( 
      { 
       global: false, 
       cache: false, 
       url: "./proc_intro.php", 
       type: "POST", 
       data: 
       { 

        submit_file: $submit_file, 
        submit_message: $submit_message, 

       }, 
       dataType: "json", 
       success: function(json) { 
        if (json.result == "success") 
        { 
         //alert('success'); 
         setTimeout(function(){ 
          showLayer('main_submit'); 
         },1000); 
        } 
        else 
        { 
         alert('server error'); 
        } 
       } 
      } 
     ); 
    } 
</script> 

proc_intro.php文件

<?php 
    $submit_file = $_REQUEST[submit_file]; 
    $submit_message = $_REQUEST[submit_message]; 


    $allowed_filetypes = array('.jpg','.gif','.bmp','.png'); 
    $max_filesize = 524288; 
    $upload_path = './images/'; 


$filename = $_FILES[$submit_file]['name']; 
    $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); 

    if(!in_array($ext,$allowed_filetypes)) 
     die('The file you attempted to upload is not allowed.'); 


if(filesize($_FILES['submit_file']['tmp_name']) > $max_filesize) 
     die('The file you attempted to upload is too large.'); 


if(!is_writable($upload_path)) 
     die('You cannot upload to the specified directory, please CHMOD it to 777.'); 

if(move_uploaded_file($_FILES['submit_file']['tmp_name'],$upload_path . $filename)) 
    { 
     echo '{"result":"success"}'; 
    }else 
    { 
     echo '{"result":"fail"}'; 
    } 
?> 

我能做些什麼來獲取文件是正確使用ajax上傳？ 你有什麼想法嗎？先謝謝你。

Answer 1

檢查了這一點

function progressHandlingFunction(e){ 
    if(e.lengthComputable){ 
     $('progress').attr({value:e.loaded,max:e.total}); 
    } 
} 

function uploadFile() 
{ 
    var $submit_file = ''; 
    var $submit_message = ''; 

    if($("#submit_file").val()) {$submit_file = $("#submit_file").val()}; 
    if($("#submit_message").val()) {$submit_message = $("#submit_message").val()}; 
    var formData = new FormData($('form')[0]); 
    $.ajax( 
     { 
      global: false, 
      cache: false, 
      url: "./proc_intro.php", 
      type: "POST", 
      data: formData , 
      xhr: function() { // Custom XMLHttpRequest 
     var myXhr = $.ajaxSettings.xhr(); 
     if(myXhr.upload){ // Check if upload property exists 
      myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload 
     } 
     return myXhr; 
    }, 
    //Ajax events 
    // beforeSend: beforeSendHandler, 
    success:function() 
    { 
     alert('success'); 
    }, 
    error: function() 
    { 
     alert('error'); 
    }, 
    // Form data 
    //Options to tell jQuery not to process data or worry about content-type. 
    cache: false, 
    contentType: false, 
    processData: false 
     } 
    ); 
} 

Answer 2

它可能不是完整的答案，但在擺脫second comma的：

data: 
{ 
    submit_file: $submit_file, 
    submit_message: $submit_message**,** 
}