首页 > 代码库 > Jquery+ajaxfileupload上传文件

Jquery+ajaxfileupload上传文件

1、说明

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

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

2、使用方法

  首先引用js脚本

    <script src="http://www.mamicode.com/Scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>    <script src="http://www.mamicode.com/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 = http://www.mamicode.com/this.value;return false;" />            <input id="btnSelect" type="button" value="http://www.mamicode.com/选择" class="button" style="width: 60px;" />            <input id="btnUpload" type="button" value="http://www.mamicode.com/上传" 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 datahttp://www.mamicode.com/= "";        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;        datahttp://www.mamicode.com/= "{\"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

技术分享

Jquery+ajaxfileupload上传文件