如何使用ajax發佈文件？

嘗試將文件保存到數據庫。我通過javascript使用formData來追加文件，並通過ajax將其添加爲post對象。由於某種原因沒有得到發送。如何使用ajax發佈文件？

我在做什麼錯？

HTML

<input type="file" style="display: none;" class="btn btn-primary uploadFile">

腳本：

 $(".saveImage") 
      .on("click", 
       function() { 
        var files = $(".uploadFile"); 
        var data = new FormData(); 


        data = $.OverWatch.worker.uploadFileHandler.addUploadFiles(files, data); 


        $.OverWatch.worker.postUserData("/Administration/AddUserImage", data, function() { 
         alert("done"); 
        }); 

       });

功能上面的樣子：

 addUploadFiles: function (files, data) { 
      $.each(files, function (i, v) { 
       var file = $(this).data("files"); 
       data.append("file", file); 
      }); 

      return data; 
     }

postUserData：

postUserData: function(url, data, callback) { 

     $.LoadingOverlay("show"); 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      data: data, 
      cache: false, 
      processData: false, 
      contentType: false, 
      dataType: "HTML", 
      success: function(data) { 

       if (callback) { 
        callback(data); 
        $.LoadingOverlay("hide"); 
       } 

      }, 
      error: function(event, jqxhr, settings, thrownError) { 
       //$.helpers.errorHandler($("#fileDialogErrors"), event.responseText); 
       var h; 
       $.LoadingOverlay("hide"); 
      } 
     }); 
    },

後端：

public ActionResult AddUserImage() 
    { 
     if (Request.Files.Count != 0) 
     { 
      //save 
     } 

     return null; 
    }

編輯：

var files = $(".uploadFile");

回報：

來源

2017-04-06 ThunD3eR

什麼是'var file = $（this）.data（「files」）;'returns？ –

@StephenMuecke檢查修改 – ThunD3eR

你還沒有回答我的問題:) - 我敢打賭，它返回'undefined' –

你var file = $(this).data("files");行代碼將返回undefined（除非你有其他一些JavaScript添加data值，但不能將文件添加到data所以在任何情況下，它不會返回一個文件）。

你的循環改爲

$.each(files, function (i, v) { 
    for (i = 0; i < v.files.length; i++) { 
     var file = v.files[i]; 
     data.append("file", file); 
    } 
});

但是，您可以通過使用var data = new FormData($('form').get(0));簡化此，將序列化你表單控件，包括文件輸入到FormData（參見how to append whole set of model to formdata and obtain it in MVC瞭解更多信息）。

我也建議你改變你的方法簽名

public ActionResult AddUserImage(IEnumerable<HttpPostedFileBase> files)

，讓DefaultModelBinder做它的魔力。

來源

2017-04-06 00:58:41

我沒有用jQuery做，但只是學習瞭如何使用簡單的做我自己昨天舊的JavaScript ...以下爲我工作。如果你想堅持用jQuery也許你可以將功能轉換到你所需要的：

var formElement = document.querySelector("form"); 
var payload = new FormData(formElement); 

function onStateChange(ev) { 
    // Check if the request is finished 
    if (ev.target.readyState == 4) { 
     editor.busy(false); 
     if (ev.target.status == '200') { 
      // Save was successful, notify the user with a flash 

     } else { 
      // Save failed, notify the user with a flash 

     } 
    } 
}; 

xhr = new XMLHttpRequest(); 
xhr.addEventListener('readystatechange', onStateChange); 
xhr.open('POST', '/posts'); 
xhr.send(payload);

也許看看使用上面的代碼對你的作品（它只是目標，你必須在同一頁上的表單）然後您可以排查是您的腳本是問題還是後端/通信問題。

來源

2017-04-06 00:40:07

您使用Request.Files

//(Request) HttpRequestBase object for the current HTTP request 
if (Request.Files.Count > 0)//// Is image is uplaod by browse button 
{ 
    var inputStream = Request.Files[0].InputStream; 
    using (var binaryReader = new BinaryReader(inputStream)) 
    { 
     var ImageBytes = binaryReader .ReadBytes(Request.Files[0].ContentLength); // same as you can get multiple file also 
    } 
    var fileExtension = Path.GetExtension(Request.Files[0].FileName); 
}

感謝調用時可以直接從控制器獲取文件。

來源

2017-04-06 06:58:03

OP不詢問如何獲取控制器中的文件問題是這些文件從未在請求中發送:) –

如何使用ajax發佈文件？

回答

相關問題