HTML5拖放上傳請求沒有正確發送

我在頁面上添加了拖放上傳表單 - 提示選擇文件的'普通'文件輸入工作正常（所有額外的標記只是引導的東西）但是當拖放POST請求時缺少文件信息。HTML5拖放上傳請求沒有正確發送

例如

拖放請求

------WebKitFormBoundaryJrgn7dns6QMhgKLZ 
Content-Disposition: form-data; name="tmp_files[][uploaded_data]"; filename="" 
Content-Type: application/octet-stream 


------WebKitFormBoundaryJrgn7dns6QMhgKLZ--

文件輸入請求

------WebKitFormBoundarynNBsaoDo4VMpbZUv 
Content-Disposition: form-data; name="tmp_files[][uploaded_data]"; filename="test.jpg" 
Content-Type: image/jpeg 


------WebKitFormBoundarynNBsaoDo4VMpbZUv--

HTML

<form id="upload_logo" action="/organisation/change_logo" method="POST" enctype="multipart/form-data"> 

    <div> 
     <label class="control-label">Upload Logo</label> 
     <div class="controls"> 
      <div class="fileupload fileupload-new" data-provides="fileupload"> 
       <div class="input-append"> 
        <div class="uneditable-input"> 
         <i class="icon-file fileupload-exists"></i> 
         <span class="fileupload-preview"></span> 
        </div> 
        <span class="btn btn-file"> 
         <span class="fileupload-new">Select file</span> 
         <span class="fileupload-exists">Change</span> 
         <input type="file" id="fileselect" name="tmp_files[][uploaded_data]" class="default"> 
        </span> 
        <a href="#" class="btn red fileupload-exists" data-dismiss="fileupload">Remove <i class="icon-trash"></i></a> 
       </div> 
      </div> 
     </div> 
     <div id="filedrag">or drag and drop here</div> 
    </div> 
</form>

(function() { 

     // getElementById 
     function $id(id) { 
      return document.getElementById(id); 
     } 

     // file drag hover 
     function FileDragHover(e) { 
      e.stopPropagation(); 
      e.preventDefault(); 
      e.target.className = (e.type == "dragover" ? "hover" : ""); 
     } 


     // file selection 
     function FileSelectHandler(e) { 

      // cancel event and hover styling 
      FileDragHover(e); 

      // fetch FileList object 
      var files = e.target.files || e.dataTransfer.files; 


      var formData = new FormData($('#upload_logo')[0]); 

      $.ajax({   
       url: '/organisation/change_logo', 
       data: formData, 
       type: "POST", 
       async: false, 
       contentType: false, 
       processData: false, 
       cache: false,   
       success: function(data) { 

        $('.invoice-logo-space').html(data); 

       }, 
       error: function() { 
        alert('Upload failed, please refresh the page and try again.') 
       } 
      }); 


     } 


     // initialize 
     function Init() { 

      var fileselect = $id("fileselect"), 
       filedrag = $id("filedrag"); 

      // file select 
      fileselect.addEventListener("change", FileSelectHandler, false); 

      // is XHR2 available? 
      var xhr = new XMLHttpRequest(); 
      if (xhr.upload) { 

       // file drop 
       filedrag.addEventListener("dragover", FileDragHover, false); 
       filedrag.addEventListener("dragleave", FileDragHover, false); 
       filedrag.addEventListener("drop", FileSelectHandler, false); 
       filedrag.style.display = "block"; 

      } 

     } 

     // call initialization file 
     if (window.File && window.FileList && window.FileReader) { 
      Init(); 
     } 


    })();

我不能看到什麼我可以做錯誤的，我相信我有拖放工作正常，然後我和風格玩弄和調整的代碼，並似乎有打破了拖放功能。

來源

2014-01-22 martincarlin87

發現我做錯了。

更改這些行：

// fetch FileList object 
var files = e.target.files || e.dataTransfer.files; 

var formData = new FormData($('#upload_logo')[0]);

到：

var formData = new FormData(); 

// fetch FileList object 
var files = e.target.files || e.dataTransfer.files; 

for (var i = 0; i < files.length; i++) { 
    formData.append('tmp_files[][uploaded_data]', files[i]); 
}

來源

2014-01-22 15:09:50 martincarlin87

HTML5拖放上傳請求沒有正確發送

回答

相關問題