JQuery的AJAX的文件上传到ASP.NET与所有形式的数据 [英] JQuery ajax file upload to ASP.NET with all form data
问题描述
我建立一个网站，一个与输入文件HTML控制职业页简历上传。
虽然使用jQuery POST表单值到一个ASPX页面，一切正常，除了文件上传罚款。
我如何使用jQuery发布各个领域（包括文件）在一个AJAX请求？
在谷歌我看到的例子正在处理只有文件上传，而不是其他领域它。
这是我的JQuery，ASPX文件上传不可缺少的。
＆LT;脚本类型=文/ JavaScript的＆GT; $（文件）。就绪（函数（五）{ // File变量
var中的文件; //添加事件
$（'＃简历'）上（'变化'，prepareUpload）。 //取得这些文件，并将它们设置为我们的变量
函数prepareUpload（事件）
{
文件= event.target.files;
} $（#submit_btn）。点击（函数（）{ VAR FILEDATA =新FORMDATA（）;
$。每个（文件，功能（键，值）
{
fileData.append（键，值）;
}）; VAR formMessage = tinyMCE.get（信息）的getContent（）。
VAR表格名称= $（'接触容器＃NAME。）VAL（）。
VAR formPhone = $（'接触容器#phone。'）VAL（）。
VAR formEmail = $（'接触容器#email。'）VAL（）。
VAR formApplyFor = $（'接触容器#applyfor。'）VAL（）。 //从页面上的元素得到一些值：
风险价值= $阿贾克斯（{
方法：POST，
网址：邮件/ Test.aspx文件，
过程数据：假的，
的contentType：假的，
数据：{
形式：'职业'，
名称：表格名称，
电话：formPhone，
电子邮件：formEmail，
applyfor：formApplyFor，
简历：FILEDATA，
求职信：window.btoa（UNESCAPE（EN codeURIComponent（formMessage）））
}， 成功：功能（数据）{
警报（成功）; }，
错误：功能（数据）{
警报（'犯错'）; }
}）
.done（函数（MSG）{
警报（'完成'）;
}）; //阿贾克斯结束
警报（一）; }）; //提交按钮结束 }）; //文件准备结束
＆LT; / SCRIPT＆GT;
这可能是因为你不应该分开对待它，而是作为一种形式对象（FORMDATA）
在这里您可以找到含有原始藏汉领域作为文件区域表单为例
<一个href=\"https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData\">https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
我做了一个简单的测试来证明它的工作原理使用ASP.NET MVC：
HTML和Javascript：
＆LT;表ID =形式NAME =Form1的方法=POSTENCTYPE =的multipart / form-data的＆GT;
＆LT; DIV＆GT;
＆LT;标签=标题＆GT;图片描述和LT; /标签＆gt;
＆LT;输入名称=标题类型=文本/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=caption2的＆GT;图像caption2的＆LT; /标签＆gt;
＆LT;输入名称=caption2的类型=文本/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=此搜索＆GT;图像文件＆LT; /标签＆gt;
＆LT;输入名称=此搜索类型=文件/＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;＆LT;按钮的onclick =提交（）＆GT;测试与LT; /按钮＆GT;功能提交（）{
VAR形式= document.querySelector（形式）; VAR数据=新FORMDATA（表）; $阿贾克斯（{
键入：POST，
网址：首页/上传
数据：数据，
过程数据：假的，
的contentType：假的
}）;
}
ASP.NET MVC：
公众的ActionResult上传（）
{
的foreach（在Request.Files字符串的文件）
{
VAR fileContent = Request.Files [文件]
如果（fileContent =空＆放大器;！＆放大器; fileContent.ContentLength大于0）
{
VAR流= fileContent.InputStream;
变种文件名= fileContent.FileName;
//你可以做任何你想在这里
}
} 的foreach（在字符串的Request.Form键）
{
VAR值=的Request.Form [关键]
} 返回内容（OK）;
}
当然，它可以通过绑定到一个模型做得比较好，等...
如果您的原始字段是不是一个形式里面，我会用追加将它们添加到FORMDATA对象，然后尝试单独发送正好这个对象。希望这有助于
I am building a website, that has a career page with Input File HTML Control for Resume uploading. While using JQuery to POST the form values to an ASPX Page, Everything works fine except File uploading. How can I Use JQuery to Post every fields (including files) in one AJAX request ? The example I see in Google are handling only the file uploading, not other fields with it. This is my JQuery, ASPX for file upload not made.
<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>
It is probably because you should not treat it separately but rather as one form object (formData)
Here you can find an example with form containing both "primitive" fields aswell as file field
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
I did a quick test to demonstrate it works using ASP.NET MVC:
HTML and 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");
}
Of course it could be done better by binding to a model, etc...
If your primitive fields are not inside a form I would use append to add them to formData object and then try to send just this object alone. Hope this helps
这篇关于JQuery的AJAX的文件上传到ASP.NET与所有形式的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
