[英]JQuery ajax file upload to ASP.NET with all form data
我正在建立一個網站,其中有一個職業頁面,其中包含用於恢復上傳的輸入文件HTML控件。 使用JQuery將表單值POST到ASPX頁面時,除了文件上載外,一切正常。 如何使用JQuery在一個AJAX請求中發布每個字段(包括文件)? 我在Google中看到的示例只處理文件上傳,而不處理其他字段。 這是我的JQuery,沒有制作用於文件上傳的ASPX。
<script type="text/javascript">
$(document).ready(function(e) {
// File variable
var files;
// Add events
$('#resume').on('change', prepareUpload);
// Grab the files and set them to our variable
function prepareUpload(event)
{
files = event.target.files;
}
$( "#submit_btn" ).click(function( ) {
var fileData = new FormData();
$.each(files, function(key, value)
{
fileData.append(key, value);
});
var formMessage = tinyMCE.get('message').getContent();
var formName = $('.contact-container #name').val();
var formPhone = $('.contact-container #phone').val();
var formEmail = $('.contact-container #email').val();
var formApplyFor = $('.contact-container #applyfor').val();
// Get some values from elements on the page:
var a= $.ajax({
method: "POST",
url: "mail/test.aspx",
processData: false,
contentType: false,
data: {
form: 'career',
name: formName ,
phone: formPhone,
email: formEmail,
applyfor: formApplyFor,
resume: fileData,
coverletter: window.btoa(unescape(encodeURIComponent( formMessage)))
},
success: function (data) {
alert('success');
},
error: function (data) {
alert('err');
}
})
.done(function( msg ) {
alert('done');
}); //ajax end
alert(a);
}); //submit button end
}); //document ready end
</script>
這可能是因為你不應該單獨處理它而是作為一個表單對象(formData)
在這里,您可以找到包含“原始”字段以及文件字段的表單示例
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
我做了一個快速測試來證明它使用ASP.NET MVC:
HTML和Javascript:
<form id="form" name="form1" method="post" enctype="multipart/form-data">
<div>
<label for="caption">Image Caption</label>
<input name="caption" type="text" />
</div>
<div>
<label for="caption2">Image Caption2</label>
<input name="caption2" type="text" />
</div>
<div>
<label for="image1">Image File</label>
<input name="image1" type="file" />
</div>
</form>
<button onclick="submit()">test</button>
function submit() {
var form = document.querySelector('form');
var data = new FormData(form);
$.ajax({
type: "POST",
url: "Home/Upload",
data: data,
processData: false,
contentType: false
});
}
ASP.NET MVC:
public ActionResult Upload()
{
foreach (string file in Request.Files)
{
var fileContent = Request.Files[file];
if (fileContent != null && fileContent.ContentLength > 0)
{
var stream = fileContent.InputStream;
var fileName = fileContent.FileName;
//you can do anything you want here
}
}
foreach (string key in Request.Form)
{
var value = Request.Form[key];
}
return Content("OK");
}
當然,通過綁定模型等可以做得更好......
如果您的原始字段不在表單內,我會使用append將它們添加到formData對象,然后嘗試僅發送此對象。 希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.