Jquery插件AjaxUpload实现文件上传功能（模拟图片上传）

转载自：http://www.leapsoul.cn/?p=304

修改版

AjaxUpload

　　Jquery插件AjaxUpload实现文件上传功能时无需创建form表单，即可实现Ajax方式的文件上传，当然根据需要也可以创建form表单。

准备工作

1、下载Jquery开发包和文件上传插件AjaxUpload。

2、创建uploadfile.html，并引入Jquery开发包和AjaxUpload插件

<script src="js/jquery-1.3.js"></script>
<script src="js/ajaxupload.3.5.js"></script>

3、根据Jquery插件AjaxUpload的需要，创建一个触发Ajax文件上传功能的DIV

<ul> 
    <li id="example"> 
    <div id="upload_button">文件上传</div>
    <p>已上传的文件列表:</p> 
    <ol class="files"></ol>
</ul>

注释：由下面的代码我们可以看到Jquery插件AjaxUpload是根据upload_button这个DIV触发文件上传功能。

前台JS代码

　　在代码中我设置了开关，根据需要可以匹配上传文件类型，同时也可以设置是以Ajax方式实现单个文件上传还是多个文件上传。

$(document).ready(function () {
    var button = $('#upload_button'), interval;
    var fileType = "all", fileNum = "one";
    new AjaxUpload(button, {
        action: 'do/uploadfile.php',
        /*
        type: "POST", //提交方式
        data:{//还可以提交的值
            'buttoninfo':button.text()
        },
        autoSubmit:false,//选择文件后,是否自动提交
        */
        name: 'userfile', //file的name
        //当选择文件后执行的方法,ext存在文件后续,可以在这里判断文件格式
        onChange: function (file, ext) {
            //内容
        },
        //提交文件时执行，也可以在这里判断文件格式
        onSubmit: function (file, ext) {
            if (fileType == "pic") {
                if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
                    this.setData({
                        'info': '文件类型为图片'
                    });
                } else {
                    $('<li></li>').appendTo('#example .files').text('非图片类型文件，请重传');
                    return false;
                }
            }

            button.text('文件上传中');

            if (fileNum == 'one')
                this.disable();
            //显示上传中的代码
            interval = window.setInterval(function () {
                var text = button.text();
                if (text.length < 14) {
                    button.text(text + '.');
                } else {
                    button.text('文件上传中');
                }
            }, 200);
        },
        onComplete: function (file, response) {//文件提交完后执行
            //var data = eval_r('(' + response + ')'); //转json
            if (response != "success")
                alert(response);

            button.text('文件上传');

            window.clearInterval(interval);

            this.enable();

            if (response == "success");
            $('<li></li>').appendTo('#example .files').text(file);
        }
    });
});

//异步删除文件
function DelFile(index) {
    $.post("/Controller/DelFile",
        { "imgurl": "", "RandomNumber": Math.random() },
        function (data, textStatus) {
            if (typeof (data.error) != null) {
                //成功
            }
            else {
                //失败
            }
        }, "json");
}

注释： 第1行：$(document).ready()函数，Jquery中的函数，类似于window.load，使用这个函数可在DOM载入就绪能够读取并操纵时立即调用绑定的函数。

第3行：fileType和fileNum参数代表上传文件的类型和数量，默认值为可上传所有类型文件，同一时间只能上传一个文件，如想上传图片文件或同时上传多个文件，可将这两个变量值变为pic和more。

第6~8行：POST到服务器的数据，你可以设置静态值也可以通过Jquery的DOM操作函数获得一些动态值，比如form表单中INPUT的值等。

第9行：等同于前端

<input type="file" name="userfile">

服务器端$_FILES['userfile']

第10~36行：文件上传前触发的功能。

第11~21行：图片文件类型的过滤功能，Jquery setData函数用来设置POST至服务器端的值。

第25~26行：设置同时只上传一个文件还是多个文件，如果只上传一个文件，则将触发按钮禁掉。如果要多传输几个文件，请在服务器端PHP文件上传程序中设置MAXSIZE的值，当然上传文件的大小限制同时和PHP.INI文件中的设置也有关。

第28~35行：在文件上传过程中每隔200毫秒动态更新一次按钮的文字，已实现动态提示的效果。window.setInterval函数用来每隔指定的时间就执行一次内置的函数，交互时间单位为豪秒。

第37~49行：文件上传功能完成后触发的功能，根据返回值如果服务器端报错，则前端通过ALERT方式提示出错信息。

服务器端Controller文件上传代码

　　

        public ActionResult upload()
        {
            string msg = string.Empty;
            string error = string.Empty;
            string name = string.Empty;
            string url = string.Empty;
            if (Request.Files.Count > 0)
            {
                HttpPostedFileBase file = Request.Files[0];
                if (IsAllowedExtension(file))
                {
                    if (file.ContentLength == 0)
                        error = "文件长度为0";
                    else
                    {
                        int UserId = GetUserId();
                        string ImgPath = System.Configuration.ConfigurationManager.AppSettings["ImageFilePath"] + UserId + "/"
                            + DateTime.Now.Year + "/" + DateTime.Now.Month + "/";
                        string fileName = DateTime.Now.ToString("yyyyMMddhhmmss")
                            + (new Random().Next(10, 1000)) + Path.GetExtension(file.FileName);//年 + 月 + 日


                        string path = Server.MapPath(ImgPath);
                        if (!Directory.Exists(path))
                            Directory.CreateDirectory(path);
                        file.SaveAs(path + fileName);
                        msg = "上传成功";
                        name = Path.GetFileNameWithoutExtension(file.FileName);
                        url = ImgPath + fileName;
                    }
                }
                else
                {
                    error = "图片格式不正确！";
                }
            }
            else
                error = "请选择上传图片！";


            StringBuilder result = new StringBuilder();
            result.Append("{");
            result.AppendFormat(""error":"{0}",", error);
            result.AppendFormat(""msg":"{0}",", msg);
            result.AppendFormat(""name":"{0}",", name);
            result.AppendFormat(""url":"{0}"", url);
            result.Append("}");
            return Content(result.ToString(), "text/html");
        }

        public ActionResult DelFile()
        {
            StringBuilder result = new StringBuilder();
            string msg = "";
            string error = "";
            try
            {
                //System.IO.File.Delete(Server.MapPath("~/" + Request.Form["imgurl"]));
                CommonClass.DelFile(Server.MapPath(Request.Form["imgurl"]));
                msg = "删除成功";
            }
            catch (Exception)
            {
                error = "删除失败";
            }
            result.Append("{");
            result.AppendFormat(""error":"{0}",", error);
            result.AppendFormat(""msg":"{0}"", msg);
            result.Append("}");
            return Content(result.ToString(), "text/html");
        }