上傳系列：ajaxupload.js

ajaxupload.js

上次說了jquery.upload.js，這次再說一下ajaxupload.js，這個其實也比較簡答，只有一個JS文件：

 

html代碼：

$(function () {
        var btnUpload = $('#upload');
        new AjaxUpload(btnUpload, {
            action: '/System/Upload',               //上傳地址
            name: 'uploadfile',                     //文件域名字
            onSubmit: function (file, ext) {        //上傳之前的操作  
                if (!(ext && /^(jpg|gif|jpeg|png)$/.test(ext))) {
                    $.messager.alert('提示', '親，請選擇jpg、png、gif、jpeg圖片！');
                    return false;
                }
                var ele = $(".imglist li");
                if (ele.length >= 5) {
                    $.messager.alert('提示', '親，最多上傳五張圖片！');
                    return false;
                }
            },
            onComplete: function (file, response) {  //上傳完畢后的操作（response服務器返回的信息）  
                var html = '<li><span><img src="' + response + '"/><p>';
                if ($(".imglist").find('li').length > 0) {
                    html += '<input type="radio" name="img"  value="' + response + '" />';
                } else {
                    html += '<input type="radio" name="img"  value="' + response + '" checked="checked" />';
                }
                html += '<a href="javascript:void(0)" onclick="defimg(this)">主圖</a>|<a href="javascript:void(0)" onclick="delimg(this)">刪除</a>';
                html += '</p></span></li>';
                $('.imglist').append(html);
            }
        });
    });

 

后台代碼和jquery.upload.js的差不多，但是有一點需要注意，這個ajaxupload.js在后台接受文件的時候，比如后台方法：

public ActionResult Upload(HttpPostedFileBase FileData)
        {
           
        }

 

MVC不會直映射到，所以比較坑人的地方出現了，我們需要通過代碼，再獲取上傳文件

public ActionResult Upload(HttpPostedFileBase FileData)
        {
            FileData = Request.Files["uploadfile"];
        }