首页 > 代码库 > 上传系列:ajaxupload.js
上传系列:ajaxupload.js
ajaxupload.js
上次说了jquery.upload.js,这次再说一下ajaxupload.js,这个其实也比较简答,只有一个JS文件:
html代码:
1 $(function () { 2 var btnUpload = $(‘#upload‘); 3 new AjaxUpload(btnUpload, { 4 action: ‘/System/Upload‘, //上传地址 5 name: ‘uploadfile‘, //文件域名字 6 onSubmit: function (file, ext) { //上传之前的操作 7 if (!(ext && /^(jpg|gif|jpeg|png)$/.test(ext))) { 8 $.messager.alert(‘提示‘, ‘亲,请选择jpg、png、gif、jpeg图片!‘); 9 return false;10 }11 var ele = $(".imglist li");12 if (ele.length >= 5) {13 $.messager.alert(‘提示‘, ‘亲,最多上传五张图片!‘);14 return false;15 }16 },17 onComplete: function (file, response) { //上传完毕后的操作(response服务器返回的信息) 18 var html = ‘<li><span><img src="‘ + response + ‘"/><p>‘;19 if ($(".imglist").find(‘li‘).length > 0) {20 html += ‘<input type="radio" name="img" value="‘ + response + ‘" />‘;21 } else {22 html += ‘<input type="radio" name="img" value="‘ + response + ‘" checked="checked" />‘;23 }24 html += ‘<a href="javascript:void(0)" onclick="defimg(this)">主图</a>|<a href="javascript:void(0)" onclick="delimg(this)">删除</a>‘;25 html += ‘</p></span></li>‘;26 $(‘.imglist‘).append(html);27 }28 });29 });
后台代码和jquery.upload.js的差不多,但是有一点需要注意,这个ajaxupload.js在后台接受文件的时候,比如后台方法:
1 public ActionResult Upload(HttpPostedFileBase FileData)2 {3 4 }
MVC不会直映射到,所以比较坑人的地方出现了,我们需要通过代码,再获取上传文件
1 public ActionResult Upload(HttpPostedFileBase FileData)2 {3 FileData = http://www.mamicode.com/Request.Files["uploadfile"];4 }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。