JQuery异部上传多个文件

来源：未知责任编辑：智问网络发表时间:2013-11-04 19:50　点击:次

这个例子需要用到JQuery和一个JQuery插件ajaxupload.js,不说太多。直接上代码：

前台：

                    $("#loading").hide();
                    this.enable();
                    var responseText = response.toString();
                    if (/MSIE 6.0/i.test(navigator.userAgent)) {
                        responseText = getCookies();
                    }
                    //显示1
                    var reArray = responseText.split('|');
                    if (reArray[0] == "1") {
                        alert("上传的文件不能大于4MB！");
                        return false;
                    }
                    else if (reArray[0] == null || reArray[0] == "") {
                        alert("上传失败！");
                        return false;
                    }
                    else {
                        var param = reArray[1];
                        if (reArray.length >= 3) {
                            param += "|" + reArray[2];
                        }
                        var divDocument = "<div id=\"" + reArray[1].substring(0, reArray[1].lastIndexOf('.') - 1) + "\" class=\"div_upfiles\">" + file + "     <a href=\"javascript:;\" onclick=\"delAttach('" + param.toString() + "','" + file + "');\">删除</a>" + "</div>";
                        $("#div_Result").append(divDocument);
                    }
                    //用于记录，上传的图片

                        $("#hidd_UploadFiles").val(newVal);
                        var imgCount = $("#hidd_imgCount").val();
                        $("#hidd_imgCount").val(imgCount - 1);
                    }
                }
            });
        }

        //当点击Submit引发回调，且并没有提交成功，引发回调时，重新载入上传UploadFiles部分
        function reloadUpFiles() {
            var hidd = $("#hidd_UploadFiles").val();
            if (hidd != "") {
                var arrayFiles = hidd.split('&');
                $("#div_Result").html("");
                for (var i = 0; i < arrayFiles.length; i++) {
                    if (arrayFiles[i].toString().length > 0) {
                        var aFile = arrayFiles[i].split('%');
                        var sysName = aFile[0].toString();
                        var showName = aFile[1].toString();
                        var divDocument = "<div id=\"" + sysName.substring(0, sysName.lastIndexOf('.') - 1) + "\" class=\"div_upfiles\">" + showName + "   <a href=\"javascript:;\" onclick=\"delAttach('" + sysName + "','" + showName + "');\">删除</a>" + "</div>";
                        $("#div_Result").append(divDocument);
                    }
                }
            }
        }
        function getCookies() {
            var cookies = document.cookie;
            var innerText = cookies.substring(cookies.lastIndexOf('ImgResponse=') + 12, cookies.lastIndexOf('{1}'));
            return innerText;
        }
</script>CSS：

<div id="loading" style="display: none;">
           <img src="images/loading.gif"></div>
       <div id="div_Result">
       </div>
       <input type="button" id="buttonUpload" value="上传" />
<span style="white-space:pre">    </span><asp:HiddenField ID="hidd_UploadFiles" runat="server" />
       <asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
       <input id="hidd_imgCount" type="hidden" value="0" />
<div id="loading" style="display: none;">
            <img src="images/loading.gif"></div>
        <div id="div_Result">
        </div>
        <input type="button" id="buttonUpload" value="上传" />
<span style="white-space:pre"> </span><asp:HiddenField ID="hidd_UploadFiles" runat="server" />
        <asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
        <input id="hidd_imgCount" type="hidden" value="0" />然后是两个异部提交的文件：

上传文件后台代码：

public class Handler2 : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        System.Threading.Thread.Sleep(2000);
        string oldName = context.Request.Files["userfile"].FileName;

        string type = oldName.Substring(oldName.LastIndexOf('.'));
        string Count = context.Request["Count"].ToString();
        string strFileName = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(Guid.NewGuid() + DateTime.Now.Ticks.ToString(), "MD5") + Count + type;
        string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
        string folder = context.Request["Folder"].ToString();
        int bytes = context.Request.Files[0].ContentLength;
        //如果，上传的文件大于4MB的话，抛消息出来
        if (bytes > 4 * 1024 * 1024)
        {
            ResponseWriteEnd(context, "1");
        }

        string strLocation = string.Empty;

        if (string.IsNullOrEmpty(folder))
        {
            strLocation = (context.Server.MapPath("uploadFiles") + ("//" + strFileName));
        }
        else
        {
            //判断目录是否存在。。不存在则创建
            string path = context.Server.MapPath("uploadFiles/" + folder + "/");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
            strLocation = path + ("//" + strFileName);
        }
        context.Request.Files[0].SaveAs(strLocation);

        context.Response.ContentType = "text/plain";

        string ResponseString = "0|" + strFileName + (!string.IsNullOrEmpty(folder) ? "|" + folder : "");

        ResponseWriteEnd(context, ResponseString);

    }
    /// <summary>
    /// 用于输出流，并终止流
    /// </summary>
    /// <param name="context">HttpContext</param>
    /// <param name="msg">你输出流信息</param>
    private void ResponseWriteEnd(HttpContext context, string msg)
    {
        context.Response.Write(msg);
        context.Response.Cookies["ImgResponse"].Value = msg + "{1}";
        context.Response.End();
    }
public class Handler2 : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        System.Threading.Thread.Sleep(2000);
        string oldName = context.Request.Files["userfile"].FileName;

        string type = oldName.Substring(oldName.LastIndexOf('.'));
        string Count = context.Request["Count"].ToString();
        string strFileName = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(Guid.NewGuid() + DateTime.Now.Ticks.ToString(), "MD5") + Count + type;
        string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
        string folder = context.Request["Folder"].ToString();
        int bytes = context.Request.Files[0].ContentLength;
        //如果，上传的文件大于4MB的话，抛消息出来
        if (bytes > 4 * 1024 * 1024)
        {
            ResponseWriteEnd(context, "1");
        }

string strLocation = string.Empty;

        if (string.IsNullOrEmpty(folder))
        {
            strLocation = (context.Server.MapPath("uploadFiles") + ("//" + strFileName));
        }
        else
        {
            //判断目录是否存在。。不存在则创建
            string path = context.Server.MapPath("uploadFiles/" + folder + "/");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
            strLocation = path + ("//" + strFileName);
        }
        context.Request.Files[0].SaveAs(strLocation);

context.Response.ContentType = "text/plain";

string ResponseString = "0|" + strFileName + (!string.IsNullOrEmpty(folder) ? "|" + folder : "");

ResponseWriteEnd(context, ResponseString);

    }
    /// <summary>
    /// 用于输出流，并终止流
    /// </summary>
    /// <param name="context">HttpContext</param>
    /// <param name="msg">你输出流信息</param>
    private void ResponseWriteEnd(HttpContext context, string msg)
    {
        context.Response.Write(msg);
        context.Response.Cookies["ImgResponse"].Value = msg + "{1}";
        context.Response.End();
    }
删除文件后台代码：

public class RemoveImage : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string parameters = context.Request.QueryString["ID"].ToString();
        var ParamArray = parameters.Split('|');
        string filename = ParamArray[0];
        string Path = "";
        string Folder = string.Empty;
        if (ParamArray.Length > 1)
        {
            Folder = ParamArray[1]+ "/";
        }
        Path = context.Server.MapPath("uploadFiles/" + Folder + "" + filename);
        if (File.Exists(Path))
        {
            File.Delete(Path);
            ResponseWriteEnd(context, filename.Substring(0, filename.LastIndexOf('.') - 1));
        }
        else
        {
            ResponseWriteEnd(context, "false");
        }
    }

    /// <summary>
    /// 用于输出流，并终止流
    /// </summary>
    /// <param name="context">HttpContext</param>
    /// <param name="msg">你输出流信息</param>
    private void ResponseWriteEnd(HttpContext context, string msg)
    {
        context.Response.Write(msg);
        context.Response.End();
    }
public class RemoveImage : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string parameters = context.Request.QueryString["ID"].ToString();
        var ParamArray = parameters.Split('|');
        string filename = ParamArray[0];
        string Path = "";
        string Folder = string.Empty;
        if (ParamArray.Length > 1)
        {
            Folder = ParamArray[1]+ "/";
        }
        Path = context.Server.MapPath("uploadFiles/" + Folder + "" + filename);
        if (File.Exists(Path))
        {
            File.Delete(Path);
            ResponseWriteEnd(context, filename.Substring(0, filename.LastIndexOf('.') - 1));
        }
        else
        {
            ResponseWriteEnd(context, "false");
        }
    }

    /// <summary>
    /// 用于输出流，并终止流
    /// </summary>
    /// <param name="context">HttpContext</param>
    /// <param name="msg">你输出流信息</param>
    private void ResponseWriteEnd(HttpContext context, string msg)
    {
        context.Response.Write(msg);
        context.Response.End();
    }

运行结果如下图：