您的位置:首页 > Web前端 > JQuery

jQuery ajax 如何将文件与所有的表单数据上传到 ASP.NET服务器

2017-08-08 10:22 501 查看
[b]经常会看到许多网站,它们有复杂的表单。你既可以填入你的邮箱、电话号码、性别等信息,也可以同时上传文件,那么这些是怎么做到的呢?当然,Asp.Net完全支持这个功能,但整个页面需要刷新。我们今天要讨论的是使用jQuery ajax技术来实现这一功能。[/b]

如果您的JavaScript代码是这样的,那么会出现什么情况呢?

<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>


出现的情况是你的文件无法上传,为什么?是因为你不应该把
form
分开而是当作一个表单对象(具体参考)。

正确的做法是:

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
});
}


HTTP一般处理程序代码

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");
}


如果您原始的数据不在同一个表单中,你可以用追加的方法将它们添加到一个 formData 对象中,然后尝试发送这个对象。

a882
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息