通过AJAX上传文件输入

问题描述：

在填写表单时，我希望我的用户预览他们刚在文件输入字段中选择的内容。为此，我试图避免任何类型的插件或其他软件（jQuery除外）。通过AJAX上传文件输入

这是我得到的，经过一些互联网研究：

$("#file-upload").change(function() { 
    var formData = new FormData($("#editForm")[0]); 
    $.ajax({ 
     url: 'script.php', //Server script to process data 
     type: 'POST', 
     xhr: function() { // Custom XMLHttpRequest 
      var myXhr = $.ajaxSettings.xhr(); 
      return myXhr; 
     }, 
     //Ajax events 
     success: function(output) { 
      document.write(output); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     }, 
     // Form data 
     data: formData, 
     //Options to tell jQuery not to process data or worry about content-type. 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
});

与此问题：FORMDATA不包含类型为“文件”的输入栏位！

任何帮助表示赞赏:)

所以，只需添加所需的输入字段...？ – Blazemonger

问题到底是什么？这怎么不起作用？ – David

我在我的html中需要输入字段。但由于某种原因，我的formData对象（var formData = new FormData（$（“＃editForm”）[0]）;）不包括他们 – Stringering

答

这个工作对我来说：

<input type="file" name="browseFile" id="photo" placeholder="File" /> 
<input id="userId" type="text" /> 

<input type="submit" value="create request" onclick="CreateRequest(event)" 


<script> 
     function CreateRequest(event) { 
      event.preventDefault ? event.preventDefault() : event.returnValue = false; 

      var inputFilePhoto = document.getElementById("photo"); 
      var imageFile = inputFilePhoto.files[0]; 

      var userId = document.getElementById("userId").value; 


      var formData = new FormData();    
      formData.append("RequestPhoto", imageFile); 
      formData.append("UserId", userId); 

      $.ajax({ 
       type: "POST", 
       url: "/User/CreateRequest", 
       data: formData, 
       contentType: false, 
       processData: false, 

       success: function() { 
        alert("OK"); 
       }, 
       error: function() { 
        alert("Error"); 
       } 

      });

谢谢，但这对我不起作用。出于某种原因，imageFile没有正确地附加到formData。当附加文本输入字段时，它工作正常。 – Stringering

通过AJAX上传文件输入

相关推荐