Jquery+ajaxfileupload上传文件

Posted 2020-09-06 冷战

ajaxfileupload.js是一款jQuery插件，用于通过ajax上传文件。

1、说明

　　ajaxfileupload.js是一款jQuery插件，用于通过ajax上传文件。

　　下载地址：http://files.cnblogs.com/files/lengzhan/ajaxfileupload.zip

2、使用方法

　　首先引用js脚本

    <script src="Scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>

 

    <script type="text/javascript">
        $(function () {
            $("#btnUpload").on(\'click\', DoUpload);
        })

        function DoUpload() {
            var image = $("#txtPath").val();
            if ($.trim(image) == "") {
                alert("请选择文件！");
                return;
            }

            $.ajaxFileUpload(
            {
                url: \'Handler/FileUploadHandler.ashx?type=Attachment\', 
                secureuri: false, 
                fileElementId: $("#fleFile").attr("id"), 
                dataType: \'json\',
                success: function (data, status) 
                {
                    if (data.url === "") {
                        alert("上传失败！");
                    } else {
                        alert("上传成功！");
                    }
                },
                error: function (result) {
                    alert("上传失败！");
                }
            });
        }
    </script>

　　然后是html代码

    <div id="ImageMaintain">
        <input type="hidden" name="hidImgUrl" id="hidImgUrl" value="" />
        <div id="uploadarea">
            <input id="txtPath" type="text" disabled="disabled" />
            <input id="fleFile" type="file" name="fleFile" onchange="document.getElementById(\'txtPath\').value = this.value;return false;" />
            <input id="btnSelect" type="button" value="选择" class="button" style="width: 60px;" />
            <input id="btnUpload" type="button" value="上传" class="button" style="width: 60px;" />
        </div>
    </div>

　　最后是一般处理程序

<%@ WebHandler Language="C#" Class="FileUploadHandler" %>

using System;
using System.Web;
using System.IO;

public class FileUploadHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string strMessage = string.Empty;
        string strUrl = string.Empty;
        string strFloderName = "Upload";
        string strNewFilePath = string.Empty;
        string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
        string strOldFileName = Path.GetFileName(context.Request.Files[0].FileName); 
        int intFileSize = context.Request.Files[0].ContentLength;
        string data = "";
        if (context.Request.Files.Count > 0 && strFileName != "")
        {
            string strExt = Path.GetExtension(context.Request.Files[0].FileName);
            strExt = strExt.TrimStart(\'.\').ToLower();
            strFloderName = strFloderName + "/" + "File/" + DateTime.Now.ToString("yyyyMMdd");
            string path = HttpContext.Current.Server.MapPath("../" + strFloderName);
            try
            {
                strFileName = Guid.NewGuid().ToString() + ("." + strExt);
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                strNewFilePath = Path.Combine(path, strFileName);
                context.Request.Files[0].SaveAs(strNewFilePath);
            }
            catch (Exception ex)
            {
                strMessage = "保存失败";
                strUrl = string.Empty;
            }
        }
        strMessage = "";
        strUrl = strFloderName + "/" + strFileName;

        data = "{\\"strUrl\\":\\"" + strUrl + "\\",\\"strMessage\\":\\"" + strMessage + "\\"}";
        context.Response.Write(data);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

　3、图片上传

　　这里会把DEMO上传至博客园，下载地址：http://files.cnblogs.com/files/lengzhan/UploadAjaxFile.zip

特别注意：这里需要提醒一下各位，默认情况下可上传的最大文件为4M，如果要上传大于4M文件，那么需要在web.config中的httpRuntime元素中添加maxRequestLength属性设置大小，同时为了支持大文件上传超时可以添加executionTimeout属性设置超时时间

<httpRuntime useFullyQualifiedRedirectUrl="true" executionTimeout="120" maxRequestLength="20480"/> 20480=20M