asp.net mvc中的jQuery ajax上传文件
我的视图中有一个文件asp.net mvc中的jQuery ajax上传文件,jquery,asp.net-mvc,ajax,Jquery,Asp.net Mvc,Ajax,我的视图中有一个文件 <form id="upload" enctype="multipart/form-data"> <input type="file" name="fileUpload" id="fileUpload" size="23" /> </form> 还有一个ajax请求 $.ajax({ url: '<%=Url.Action("JsonSave","Survey") %>', dataType: '
<form id="upload" enctype="multipart/form-data">
<input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>
还有一个ajax请求
$.ajax({
url: '<%=Url.Action("JsonSave","Survey") %>',
dataType: 'json',
processData: false,
contentType: "multipart/mixed",
data: {
Id: selectedRow.Id,
Value: 'some date was added by the user here :))'
},
cache: false,
success: function (data) {}
});
$.ajax({
url:“”,
数据类型:“json”,
processData:false,
contentType:“多部分/混合”,
数据:{
Id:selectedRow.Id,
值:“用户在此处添加了一些日期:)”
},
cache:false,
成功:函数(数据){}
});
但是请求中没有文件。Files。ajax请求有什么问题?您不能通过ajax上传文件,您需要使用iFrame或其他一些技巧来完成完整的回发。这主要是出于安全考虑 使用SteveSanderson的SWFUpload和ASP.NETMVC。这是我在Asp.NETMVC上读到的第一件使它正常工作的东西(当时我也是MVC新手),希望它对您也有帮助。 自HTML5以来,情况发生了变化 JavaScript
document.getElementById('uploader').onsubmit = function () {
var formdata = new FormData(); //FormData object
var fileInput = document.getElementById('fileInput');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
//Appending each file to FormData object
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Home/Upload');
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
return false;
}
document.getElementById('uploader')。onsubmit=function(){
var formdata=new formdata();//formdata对象
var fileInput=document.getElementById('fileInput');
//遍历fileInput中选定的每个文件
对于(i=0;i
控制器
public JsonResult Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i]; //Uploaded file
//Use the following properties to get file's name, size and MIMEType
int fileSize = file.ContentLength;
string fileName = file.FileName;
string mimeType = file.ContentType;
System.IO.Stream fileContent = file.InputStream;
//To save file, use SaveAs method
file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
}
return Json("Uploaded " + Request.Files.Count + " files");
}
publicjsonresult上传()
{
对于(int i=0;i
编辑:HTML
<form id="uploader">
<input id="fileInput" type="file" multiple>
<input type="submit" value="Upload file" />
</form>
如果使用ajax发布表单,则无法 使用$.ajax方法发送图像, 必须使用经典的xmlHttpobject方法保存图像,
它的其他替代方法是使用提交类型而不是按钮,现在可以通过将
FormData
对象传递给$.AJAX
请求的data
属性来上传AJAX文件
由于OP特别要求使用jQuery实现,您可以这样做:
上传!
$(“#上传”).submit(函数(e){
e、 preventDefault();//停止标准表单提交
$.ajax({
url:this.action,
类型:this.method,
数据:新表单数据(本),
cache:false,
contentType:false,
processData:false,
成功:功能(数据){
console.log(data.UploadedFileCount+“已成功上载的文件”);
},
错误:函数(xhr、错误、状态){
console.log(错误、状态);
}
});
});
publicjsonresult调查()
{
对于(int i=0;i
有关的详细信息我在vuejs版本v2.5.2上有一个类似的示例
<form action="url" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
</div>
<div class="col-md-6">
<input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
</div>
</form>
<script>
Vue.component('v-bl-document', {
template: '#document-item-template',
props: ['doc'],
data: function () {
return {
document: this.doc
};
},
methods: {
submit: function () {
event.preventDefault();
var data = new FormData();
var _doc = this.document;
Object.keys(_doc).forEach(function (key) {
data.append(key, _doc[key]);
});
var _refs = this.$refs;
Object.keys(_refs).forEach(function (key) {
data.append(key, _refs[key].files[0]);
});
debugger;
$.ajax({
type: "POST",
data: data,
url: url,
cache: false,
contentType: false,
processData: false,
success: function (result) {
//do something
},
});
}
}
});
</script>
Vue.组件(“v-bl-document”{
模板:“#文档项模板”,
道具:['doc'],
数据:函数(){
返回{
文档:this.doc
};
},
方法:{
提交:函数(){
event.preventDefault();
var data=new FormData();
var _doc=本文件;
Object.keys(_doc).forEach(函数(键){
data.append(key,_doc[key]);
});
var _refs=此。$refs;
Object.keys(_refs).forEach(函数(键){
data.append(key,_refs[key].files[0]);
});
调试器;
$.ajax({
类型:“POST”,
数据:数据,
url:url,
cache:false,
contentType:false,
processData:false,
成功:功能(结果){
//做点什么
},
});
}
}
});
json无法上传这样的文件。最好使用浏览器的默认上传行为;您可以通过ajax发送表单数据。@JoshM。是的,但是如果没有某种外部解决方案,你不能通过AJAX发送文件。@kehrk:有了HTML5中新的FormData和文件对象,你确实可以通过AJAX上传文件。尝试以下操作:。是否可以为视图添加代码?HTML。。回答这个问题。很好的博客Ajeesh!谢谢您好,有没有办法将上传的文件绑定到模型中?这在IE中不起作用。IE在file.FileName参数中传递用户的完整本地路径,因此您需要path.GetFileName(file.FileName)以确保安全。否则答案就太棒了。这是一个很大的帮助,谢谢。这个答案中的链接(以及评论中的另一个链接)被打断了。非常感谢。我在几个问题上找到了最好的答案。我来这里是专门寻找jQuery解决方案的,看到标记为已回答的响应只使用了普通JavaScript,我有点失望。你的解决方案很好,对我来说非常有效。非常感谢:)请注意,如果不选择文件,数组中似乎仍有一个文件,ContentLength=0@Savage:2020年测试/chrome/asp网络公司