继承前文： 图片上传_ajax上传之实际应用(附上Demo)
直接上源码吧：
js源码：
/// <reference path="jquery-1.8.3.js" />/// <reference path="ajaxForm/jquery.form.js" />/*!* jQuery upload* 用于上传单个文件，上传成功后,返回文件路径。* 本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件** Date: /4/23*//*使用:html:<div style="width: 100%; float: left;"><input type="hidden" id="hfThumbnail" value="/uploads//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//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="/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//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//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 = bine(dirPath, fileName);file.SaveAs(filePath);return new JsonResult(StatusMessageType.Success, "上传成功。", new{RelativePath = WebUtility.ResolveUrl(bine(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}
其他的扩展方法就不一一给出来了。
