ajax图片上传，图片异步上传，更新

继承前文：图片上传_ajax上传之实际应用(附上Demo)
直接上源码吧：

js源码：

/// <reference path="jquery-1.8.3.js" />/// <reference path="ajaxForm/jquery.form.js" />/*! * jQuery upload * 用于上传单个文件，上传成功后,返回文件路径。 * 本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件 * * Date: 2014/4/23 *//*使用:html:<div style="width: 100%; float: left;">    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />    <div class="imgdiv"></div>    <span class="img_span">        <input type="file" name="file" />    </span>         <input type="button" value="上传" class="upload" /></div><div style="width: 100%; float: left;">    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />    <div class="imgdiv"></div>    <span class="img_span">        <input type="file" name="file" />    </span>         <input type="button" value="上传" class="upload" /></div>js:$(document).ready(function () {            //$(".upload").upload({    //    uploadData: { id: "12233" },    //    successFn: function (response, statusText, xhr, $this) {    //        alert(response.Data.RelativePath)    //    },    //    deleteData: { id: function () { return "asdfasdf" } }    //});      $(".upload").upload({        uploadData: { id: "12233" },        successFn: "success",           //可以是字符串        deleteData: { id: function () { return "asdfasdf" } }    });});//上传成功后执行该函数function success(response, statusText, xhr, $this) {    //比如插入编辑器    alert(response.Data.RelativePath + $this.attr("value"))}*/(function ($) {    $.extend($.fn, {        upload: function (settings) {            var options = $.extend({                fileType: "gif|jpg|jpeg|png|bmp",                       //允许的文件格式                uploadUrl: "/ajax/handler.ashx?action=uploadfile",      //上传URL地址                deleteUrl: "/ajax/handler.ashx?action=deletefile",      //删除URL地址                width: "",                                              //图片显示的宽度                height: 100,                                            //图片显示的高度                imgSelector: ".imgdiv",                                  //图片选择器                uploadData: {},                                         //上传时需要附加的参数                deleteData: {},                                         //删除时需要附加的参数                deleteFn: function ($parent, showMessage) {             //删除图片的方法(默认方法使用POST提交)                    methods.deleteImage($parent, showMessage);                },                beforeSubmitFn: "beforeUpload",                         //上传前执行的方法 原型 beforeSubmit(arr, $form, options);                successFn: "uploadSuccess",                             //上传成功后执行的方法 uploadSuccess(response, statusText, xhr, $this)                errorFn: "uploadError"                                  //上传失败后执行的方法            }, settings);            //上传准备函数            var methods = {                //验证文件格式                checkFile: function (filename) {                    var pos = filename.lastIndexOf(".");                    var str = filename.substring(pos, filename.length);                    var str1 = str.toLowerCase();                    if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; }                    var re = new RegExp("\.(" + options.fileType + ")$");                    return re.test(str1);                },                //创建表单                createForm: function () {                    var $form = document.createElement("form");                    $form.action = options.uploadUrl;                    $form.method = "post";                    $form.enctype = "multipart/form-data";                    $form.style.display = "none";                    //将表单加当document上，                    document.body.appendChild($form);  //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。                    return $($form);                },                //创建图片                createImage: function () {                    //不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高                    var img = $(document.createElement("img"));                    img.attr({ "title": "双击图片可删除图片！" });                    if (options.width !== "") {                        img.attr({ "width": options.width });                    }                    if (options.height !== "") {                        img.attr({ "height": options.height });                    }                    return img;                },                showImage: function (filePath, $parent) {                    var $img = methods.createImage();                    $parent.find(options.imgSelector).find("img").remove();                    //要先append再给img赋值，否则在ie下不能缩小宽度。                    $img.appendTo($parent.find(options.imgSelector));                    $img.attr("src", filePath);                    this.bindDelete($parent);                },                bindDelete: function ($parent) {                    $parent.find(options.imgSelector).find("img").bind("dblclick", function () {                        options.deleteFn($parent, true);                    });                },                deleteImage: function ($parent, showMessage) {                    var $fileInput = $parent.find("input:hidden");                    if ($fileInput.val() !== "") {                        var data = $.extend(options.deleteData, { filePath: $fileInput.val(), t: Math.random() });                        $.post(options.deleteUrl, data, function (response) {                            if (showMessage) { alert(response.MessageContent) }                            if (response.MessageType == 1) {                                $fileInput.val("");                                $parent.find(options.imgSelector).find("img").remove();                            }                        }, "JSON");                    }                },                onload: function ($parent) {                    var hiddenInput = $parent.find("input:hidden");                    if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {                        var img = methods.createImage();                        if ($parent.find(options.imgSelector).find("img").length > 0) { $parent.find(options.imgSelector).find("img").remove(); }                        //要先append再给img赋值，否则在ie下不能缩小宽度。                         img.appendTo($parent.find(options.imgSelector));                        img.attr("src", hiddenInput.val());                        methods.bindDelete($parent);                    }                }            };            //上传主函数            this.each(function () {                var $this = $(this);                methods.onload($this.parent());                $this.bind("click", function () {                    var $fileInput = $(this).parent().find("input:file");                    var fileBox = $fileInput.parent();                    if ($fileInput.val() === "") {                        alert("请选择要上传的图片！");                        return false;                    }                    //验证图片                    if (!methods.checkFile($fileInput.val())) {                        alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");                        return false;                    }                    //若隐藏域中有图片，先删除图片                    if ($fileInput.val() !== "") {                        options.deleteFn($this.parent(), false);                        //methods.deleteImage($this.parent(), false);                    }                    //创建表单                    var $form = methods.createForm();                    //把上传控件附加到表单                    $fileInput.appendTo($form);                    fileBox.html("<img src=\"/admin/styles/images/loading.gif\" />   正在上传...  ");                    $this.attr("disabled", true);                    //构建ajaxSubmit参数                    var data = {};                    data.data = options.uploadData;                    data.type = "POST";                    data.dataType = "JSON";                    //上传前                    data.beforeSubmit = function (arr, $form, options) {                        var beforeSubmitFn;                        try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { };                        if (beforeSubmitFn) {                            var $result = beforeSubmitFn(arr, $form, options);                            if (typeof ($result) == "boolean")                                return $result;                        }                    };                    //上传失败                    data.error = function (response, statusText, xhr, $form) {                        var errorFn;                        try { errorFn = eval(options.errorFn) } catch (err) { };                        if (errorFn) {                            errorFn(response.responseText, statusText, xhr, $this);                        }                    };                    //上传成功                    data.success = function (response, statusText, xhr, $form) {                        //response = eval("(" + response + ")");                        if (response.MessageType == 1) {                            methods.showImage(response.Data.RelativePath, $this.parent());                            $this.parent().find("input:hidden").val(response.Data.RelativePath);                            var successFn;                            try { successFn = eval(options.successFn) } catch (err) { };                            if (successFn) {                                $.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载                                successFn(response, statusText, xhr, $this);                            }                        } else {                            alert(response.MessageContent);                        }                        $this.attr("disabled", false);                        fileBox.html("<input type=\"file\" name=\"file\" />");                        $form.remove();                    };                    try {                        //开始ajax提交表单                        $form.ajaxSubmit(data);                    } catch (e) {                        alert(e.message);                    }                });            });        }    });})(jQuery)

html代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="Scripts/jquery/jquery-1.8.3.js"></script><script src="Scripts/jquery/ajaxForm/jquery.form.js"></script><script src="Scripts/jquery/jquery.upload.js"></script><title></title></head><body><form id="form1" runat="server"><div style="width: 100%; float: left;">    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />    <div class="imgdiv"></div>    <span class="img_span">        <input type="file" name="file" />    </span>         <input type="button" value="上传" class="upload" /></div><div style="width: 100%; float: left;">    <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />    <div class="imgdiv"></div>    <span class="img_span">        <input type="file" name="file" />    </span>         <input type="button" value="上传" class="upload" /></div></form><script type="text/javascript">    $(document).ready(function () {        //$(".upload").upload({        //    uploadData: { id: "12233" },        //    successFn: function (response, statusText, xhr, $this) {        //        alert(response.Data.RelativePath)        //    },        //    deleteData: { id: function () { return "asdfasdf" } }        //});        $(".upload").upload({            uploadData: { id: "12233" },            successFn: "success",            deleteData: { id: function () { return "asdfasdf" } }        });    });    //上传成功后执行该函数    function success(response, statusText, xhr, $this) {        //比如插入编辑器        alert(response.Data.RelativePath + $this.attr("value"))    }</script></body></html>

服务器端使用一般处理程序：

public void ProcessRequest(HttpContext context){    context.Response.ContentType = "application/json";    var action = context.Request.QueryString.Get<string>("action").ToLower();    var response = new JsonResult(StatusMessageType.Error, "没有权限或无效请求。").ToJson();    switch (action)    {        case "uploadfile":            if (context.Request.Files.Count > 0)                response = UploadFile(context.Request);            break;        case "deletefile":            response = DeleteFile(context.Request.Form);            break;        default:            break;    }    context.Response.Write(response);}/// <summary>/// /// </summary>/// <param name="file"></param>/// <returns></returns>private string UploadFile(HttpRequest request){    if (request.Files.Count == 0)        return new JsonResult(StatusMessageType.Error, "没有可处理的数据。").ToJson();    var id = request.Form.Get<string>("id", "");    var file = request.Files[0];    if (file == null || file.ContentLength <= 0 || string.IsNullOrEmpty(file.FileName))        return new JsonResult(StatusMessageType.Error, "没有可处理的数据。").ToJson();    //IStoreFile storeFile = null;    string[] datePaths = new string[] { "~/uploads/" };    datePaths = datePaths.Union(DateTime.Now.ToString("yyyy-MM-dd").Split('-')).ToArray();    var relativePath = storeProvider.JoinDirectory(datePaths);    var dirPath = HttpContext.Current.Server.MapPath(relativePath);    if (!System.IO.Directory.Exists(dirPath))        System.IO.Directory.CreateDirectory(dirPath);    var fileName = GenerateFileName(Path.GetExtension(file.FileName));    var filePath = Path.Combine(dirPath, fileName);    file.SaveAs(filePath);    return new JsonResult(StatusMessageType.Success, "上传成功。", new    {        RelativePath = WebUtility.ResolveUrl(Path.Combine(relativePath, fileName)),        Size = file.ContentLength,        Id = id,    }).ToJson();}public string DeleteFile(NameValueCollection form){    var filePath = form.Get<string>("filePath", "").Trim();    if (string.IsNullOrEmpty(filePath))        return new JsonResult(StatusMessageType.Error, "无效提交。").ToJson();    try    {        if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(filePath)))        {            System.IO.File.Delete(HttpContext.Current.Server.MapPath(filePath));            return new JsonResult(StatusMessageType.Success, "文件删除成功。").ToJson();        }        else        {            return new JsonResult(StatusMessageType.Success, "找不到该文件。").ToJson();        }    }    catch (Exception)    {        return new JsonResult(StatusMessageType.Hint, "发生错误。").ToJson();    }}/// <summary>/// 生成随机文件名/// </summary>/// <returns></returns>private string GenerateFileName(string extension){    return DateTime.Now.Ticks.ToString() + extension;}

程序使用的是framework4.0，所以使用了一些扩展方法。
JsonTesult类代码：

[Serializable]public class JsonResult{    private StatusMessageType _messageType;    private string _messageContent;    /// <summary>    ///     /// </summary>    /// <param name="messageType"></param>    /// <param name="messageContent"></param>    /// <param name="data"></param>    public JsonResult(StatusMessageType messageType, string messageContent, object data = null)    {        _messageType = messageType;        _messageContent = messageContent;        Data = data;    }    public StatusMessageType MessageType    {        get { return _messageType; }        set { _messageType = value; }    }    public string MessageContent    {        get { return _messageContent; }        set { _messageContent = value; }    }    public object Data { get; set; }    public string ToJson()    {        JavaScriptSerializer serializer = new JavaScriptSerializer();        var json = serializer.Serialize(this);        //string p = @"\\/Date\((\d+)\)\\/";        //MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString);        //Regex reg = new Regex(p);        //json = reg.Replace(json, matchEvaluator);        return json;    }    private static string ConvertJsonDateToDateString(Match m)    {        string result = string.Empty;        DateTime dt = new DateTime(1970, 1, 1);        dt = dt.AddMilliseconds(long.Parse(m.Groups[1].Value));        dt = dt.ToLocalTime();        result = dt.ToString("d");        return result;    }}

StatusMessageType枚举类：

/// <summary>/// 提示消息类别/// </summary>public enum StatusMessageType{    /// <summary>    /// 权限不足    /// </summary>    NoAccess = -2,    /// <summary>    /// 错误    /// </summary>    Error = -1,    /// <summary>    /// 成功    /// </summary>    Success = 1,    /// <summary>    /// 提示信息    /// </summary>    Hint = 0}

其他的扩展方法就不一一给出来了。