使用HTML5 FileReader，c＃和jquery上傳文件

我想上傳文件到通用HttpHandler在C＃中。使用HTML5 FileReader，c＃和jquery上傳文件

$s("#dropArea") 
    .on("drop", function(e) { 
     e.preventDefault && e.preventDefault(); 

     var file = e.originalEvent.dataTransfer.files[0]; 

     var reader = new FileReader(); 

    reader.onload = function(evt) { 
     $s.ajax({ 
      url: MY_SERVER_URL, 
      type: "POST", 
      data: reader.result, 
      headers: { 
       "x-file-name": file.name 
      }     
     }); 
    }; 
    reader.readAsDataURL(file);

這似乎很好地工作，但是當張貼到ashx的頁面，我嘗試解碼像這樣的形象：當我嘗試

var form = context.Request.Form[0]; 
var attachment = form.Split(new[] {","}, StringSplitOptions.RemoveEmptyEntries)[1]; 

byte[] data = Convert.FromBase64String(attachment);

我使用拖放事件得到文件寫入byte[] data到磁盤，結果文件不正確。我哪裏錯了？

編輯：我也嘗試過使用FormData，但Request.Form和Request.Files集合總是空的，我必須手動解析邊界。這是我用來做到的代碼：

var formData = new FormData(); 
    formData.append(file.name, file); 

    $s.ajax({ 
     url: MY_SERVER_URL, 
     type: "POST", 
     data: formData, 
     processData: false, 
     contentType: 'multipart/form-data', 
     mimeType: 'multipart/form-data', 
     headers: { 
      "x-file-name": file.name    
    });

來源

2014-09-18 Mike_G

發送文件，你爲什麼不這樣做正常人一樣，並使用'formData'對象要上傳的圖片的選項？ – adeneo 2014-09-18 20:42:22

@adeneo，因爲當我這樣做時，Request.Form集合總是空的。我在jQuery中將內容類型設置爲「multipart/form-data」，它只是通過Request.InputStream來實現的，然後我需要解析出邊界。 – 2014-09-18 20:46:15

在第二個中，刪除標題並將contentType設置爲「false」，並查看它是否有效。 – adeneo 2014-09-18 20:50:27

使用jQuery的$.ajax發送文件時，必須將processData和contentType選項設置爲false。

將processData設置爲false可以確保jQuery不會以任何方式處理formData對象。

將contentType設置爲false可以確保jQuery不會添加邊界，它通常會執行某些操作。也就是說，jQuery的添加的contentType，和的邊界，所以它看起來像什麼：

Content-Type=multipart/form-data; boundary=----------------993434535254

我們不希望jQuery來設置一定的boudary，因爲那麼服務器端就不會明白什麼是因此要避免它發送文件時將contentType的設置爲false。

var formData = new FormData(); 

    formData.append(file.name, file); 

$s.ajax({ 
    url: MY_SERVER_URL, 
    type: "POST", 
    data: formData, 
    processData: false, 
    contentType: false, 
});

，這就是真的那麼需要用jQuery的

來源

2014-09-21 16:13:50 adeneo

你在什麼瀏覽器上試過這個？你用的是什麼版本的jquery？包含更多細節以增加您找到答案的機會。

既然你上傳圖片，你可能需要使用可以調整/轉換或任何一樣好，甚至你的用戶會上傳錯誤類型的組件，可能要考慮一個組件，它可以幫助您與此有關。

文件上傳在網絡上可能會非常棘手，而不是試圖重新發明輪子，保存自己的一些頭髮拉和挑庫這樣的人已經工作了很多年plupload。

即使你得到這個代碼上面在特定情況下工作，你認爲它的工作原理，它很可能是越野車在每一個情況下，你還沒有測試。通過網絡文件上傳，每一個細節都與文件傳輸一起發送的頭文件必須完全正確，否則將無法正常工作。如果你的任何文件很大，這取決於你使用的是什麼web服務器，你可能需要調整這些設置等。

我不知道你的代碼有什麼問題，但我知道這樣做是正確的比上面的要複雜得多。

來源

2014-09-18 21:17:32 pilavdzice

使用HTML5 FileReader，c＃和jquery上傳文件

回答

相關問題