ajax图片上传,图片异步上传,更新实例(2)

<!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="https://www.jb51.net/Scripts/jquery/jquery-1.8.3.js"></script> <script src="https://www.jb51.net/Scripts/jquery/ajaxForm/jquery.form.js"></script> <script src="https://www.jb51.net/Scripts/jquery/jquery.upload.js"></script> <title></title> </head> <body> <form runat="server"> <div> <input type="hidden" value="/uploads/2014/04/23/635338686611432716.jpg" /> <div></div> <span> <input type="file" /> </span> <input type="button" value="上传" /> </div> <div> <input type="hidden" value="/uploads/2014/04/23/635338686611432716.jpg" /> <div></div> <span> <input type="file" /> </span> <input type="button" value="上传" /> </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></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类代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjdzx.html