上传系列：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     });

View Code

 

后台代码和jquery.upload.js的差不多，但是有一点需要注意，这个ajaxupload.js在后台接受文件的时候，比如后台方法：

1 public ActionResult Upload(HttpPostedFileBase FileData)

2         {

3            

4         }

View Code

 

MVC不会直映射到，所以比较坑人的地方出现了，我们需要通过代码，再获取上传文件

1 public ActionResult Upload(HttpPostedFileBase FileData)

2         {

3             FileData = Request.Files["uploadfile"];

4         }

View Code