继承前文:图片上传_ajax上传之实际应用(附上Demo)
直接上源码吧:
html代码:
服务器端使用一般处理程序:
程序使用的是framework4.0,所以使用了一些扩展方法。
JsonTesult类代码:
直接上源码吧:
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)
- <!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;
- }
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
- }