通過ajax的javascript formdata

Question

我想通過AJAX和PHP上傳文件。我有如下一個HTML表單：

<form method="post" id="sectiononeform" name="sectiononeform" enctype="multipart/form-data"> 

    <div class="clearfix"> 
     <input type="text" name="customHeading1" id="customHeading1" class="span10" value=""/> 
    </div> 

    <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded --> 
    <div class="clearfix"> 
     <textarea id="elm1" name="elm1" rows="15" class="xxlarge" cols="80" style="width: 80%"> 

     </textarea> 
    </div> 

    <div class="clearfix"> 
     <input type="file" name="file1" id="file1" class="span10" /> 
    </div> 

    <div class="clearfix">   
     <div class="actions"> 
      <input type="submit" id="saveSection1" name="saveSection1" value="Submit" /> 
      <input type="reset" name="resetSection1" value="Reset" />     
     </div> 
    </div> 

</form> 

我的jQuery代碼如下：

$(document).ready(function(){ 
    $("#saveSection1").click(function(e){ 
     e.preventDefault(); 

     var formdata = false; 

     /*function showUploadedItem (source) { 
      var list = document.getElementById("image-list"), 
       li = document.createElement("li"), 
       img = document.createElement("img"); 
      img.src = source; 
      li.appendChild(img); 
      list.appendChild(li); 
     } */ 

     if (window.FormData) { 
      formdata = new FormData(); 

      //document.getElementById("btn").style.display = "none"; 
     } 

     var len = document.getElementById("file1").files.length, img, reader, file; 

     for (var i = 0 ; i < len; i++) { 
      file = document.getElementById("file1").files[i]; 
      if (!!file.type.match(/image.*/)) { 
       if (window.FileReader) { 
        reader = new FileReader(); 
        /*reader.onloadend = function (e) { 
         showUploadedItem(e.target.result, file.fileName); 
        };*/ 
        reader.readAsDataURL(file); 
       } 
       if (formdata) { 
        alert("form data"); 
        formdata.append("customHeading1", document.getElementById("customHeading1").value); 
        formdata.append("elm1", document.getElementById("elm1").value); 
        formdata.append("custsection1", 1); 
        formdata.append("venue_id", document.getElementById("venue_id").value); 
        formdata.append("images[]", file); 
        alert(formdata); 
       } 
      } 
     } 
     var params = $("form#sectiononeform").serialize(); 
     //alert("params" + params); 
     params = params + "&custsection1=1&venue_id=" + $("#venue_id").val() + "&formdata=" + formdata; 
     //alert(params); 
     $.ajax({ 
      type: 'POST', 
      url: 'saveCustomSectionData.php', 
      data: formdata, 
      success: function(data){ 
      alert(data); 
      } 
     }); 
    }); 
}); 

我的問題是，當我不使用文件輸入類型，我可以只序列化形式值並通過AJAX發送。由於我使用文件輸入類型，我正在使用formdata並將信息附加到它。這是發送數據的正確方式嗎？我沒有得到任何迴應的PHP，我也看不到任何螢火蟲請求。相反，我得到一些模糊的錯誤，因爲「對WrappedNative原型對象的非法操作」。有什麼建議麼？

Answer 1

只要我知道這是不可能的，由於安全原因。

但可以使用類似jquery.form.js（可從http://jquery.malsup.com/form/獲得），並且很容易實現。

他們也提供了一些很好的例子，讓你嘗試aswel。

Answer 2

您可以使用AJAX發送文件。使用新的FormData（）和帶有contentType的$ .ajax方法：false，processData：false。

檢查了這一點：

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#ajax").hide(); 

    $("#botonancho").click(function() 
    { 
     if ($("#ficherocsv").val() =="") 
     { 
      alert(" Seleccione 1º el archivo "); 
     } 
     else 
     { 
      var data = new FormData(); 
      data.append('file', $('#ficherocsv')[0].files[0]); 

      $("#botonancho").val("Por favor... espere."); 
      $("#ajax").html("<img src='imagenes/ajax-indicator.gif' alt='Indicador Actividade Ajax' />").show(); 

      $.ajax({ 
       url: 'importacion.php', 
       data: data, 
       cache: false, 
       contentType: false, 
       processData: false, 
       type: 'POST', 
       success: function(data) 
       { 
        $("#ajax").html(""); 

        $("#ajax").html(data).fadeIn("slow",function() 
        { 
         $("#ajax").delay(1500).fadeOut("slow",function() 
         { 
          $("#botonancho").val("IMPORTAR Alumnos CSV (codificación UTF-8)"); 
          $("#ficherocsv").val(""); 
          $("#ajax").hide(); 

         }); 
        }); 
       } 
      }); 
     } 
    }); 

}); 
</script> 

問候。