怎么利用ajax,在mvc中异步上传文件啊
ajaxfileupload.js,我们MVC项目上传都是用的这个。
function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/Controllers名/Upload?action=up', //用于文件上传的服务器端请求地址up参数标记此次是上传操作还是裁剪操作 secureuri: false, //一般设置为false,是否安全上传 fileElementId: 'HotfileImg', //文件上传控件的id属性 <input type="file" id="file" name="file" /> dataType: 'json', //返回值类型 一般设置为json 期望服务器传回的数据类型 success: function (data, status) //服务器成功响应处理函数 { //成功。 }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } )
我试过了,不行
@itwwg: 唉?
@W宁宁: 这个我用过,不错,不行是不会玩吧
@清风君: 嘻嘻,我觉得也蛮好用的
你用jquery的一个插件jquery.upload.js ,
不行啊
@itwwg: 那里面有案例,只根据自己的需要改改代码就可以了
51CTO下载-jquery.jUploader-v1.01
我下载了一个,,然后又建立了一个项目都给拿过去根本用不了啊。。只能在源下载的才能用
@itwwg:
$.jUploader.setDefaults({ cancelable: true, allowedExtensions: ['jpg', 'png', 'gif'], messages: { upload: '上传', cancel: '取消', emptyFile: "{file} 为空,请选择一个文件.", invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.", onLeave: "文件正在上传,如果你现在离开,上传将会被取消。" } });
$.jUploader({ button: 'upload-button1', // 这里设置按钮id action: '/Blog/UploadImage', // 这里设置上传处理接口,这个加了参数test_cancel=1来测试取消
// 上传完成事件 onComplete: function (fileName, response) { // response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' } if (response.success) { $('#photo1').attr('src', response.fileUrl); $("#HeaderImage").val(response.fileUrl); // 这里说明一下,一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl),方便提交到服务器保存 } else { alert('上传失败'); } } });
@itwwg:
public ActionResult UploadImage() { bool success = false;
if (Request.Files.Count > 0) {
string ext = System.IO.Path.GetExtension(Request.Files[0].FileName).ToLower(); if (ext == ".jpg" || ext == ".gif" || ext == ".png" && Request.Files[0].ContentLength <= 512 * 1024 * 1024) {
success = true; string fileName = Guid.NewGuid().ToString("N") + ext;
Request.Files[0].SaveAs(Server.MapPath("~/Content/newImg/Headers") + fileName);
var result= new {success=true,fileUrl="/Content/newImg/Headers/" + fileName }; return Json(result); } } var temp = new { success=false, fileUrl=""}; return Json(temp); }
@猿进化: $.jUploader,,新建一个项目,这个方法都点不出来,原包都引用进去了,,
@itwwg: 应用的是jquery.jUploader-1.01.js
@猿进化: 你知道怎么传文件么?我把我下的这个包发给你
@猿进化: 我下载了那个版本的,,还是不行啊,,
你的qq是多少
@itwwg: 1693275311
使用jquery.form.js框架,实例利用如下方式进行上传:
HTML代码:
<form action="<%=basePath %>user/fileupload.action" enctype="multipart/form-data" method="post" id="userPhotoUploadForm">
<input type="file" id="userPhotoFile" name="imgFile" style="display: none;"/>
</form>
js代码:
var options = {
url: basePath + 'user/fileupload.action',
type: 'post',
dataType: 'json',
data: $("#" + formid).serialize(),
success: function (data) {
console.log(data);
$("#memberPhoto").attr("src",basePath + data.url);
$("#userPhoto").attr("value", data.url);
}
};
$("#" + formid).ajaxSubmit(options);
通过以上方式便可以实现文件的异步上传功能
你这个还是要提交一个form啊,那么form里面还有其他的数据呢,。一起提交怎么办呢
@itwwg: 序列化表单后,表单中的所有元素的值都给提交了,你在后台相应的处理不就可以了吗?