Jquery+ajaxfileupload上传文件

Posted 冷战

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery+ajaxfileupload上传文件相关的知识,希望对你有一定的参考价值。

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

 

以上是关于Jquery+ajaxfileupload上传文件的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的ajaxFileUpload上传文件插件刷新一次才能再次调用触发change

ajaxFileUpload.js插件支持多文件上传的方法

jQuery插件之ajaxFileUpload

jQuery插件之ajaxFileUpload异步上传

jQuery ajaxFileUpload.js 文件异步ajax上传

使用jquery插件ajaxfileupload一次上传多个文件,示例