基于ajax实现上传图片代码示例解析


Posted in Javascript onDecember 03, 2020

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 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
js实现文字列表无缝滚动效果
Jun 23 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
WebPack工具运行原理及入门教程
Dec 02 #Javascript
Vue router安装及使用方法解析
Dec 02 #Vue.js
js前端对于大量数据的展示方式及处理方法
Dec 02 #Javascript
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
JavaScript 如何在浏览器中使用摄像头
Dec 02 #Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
You might like
php 购物车实例(申精)
2009/05/11 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue实现分页加载效果
2019/12/24 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
使用js和canvas实现时钟效果
2020/09/08 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
详解django中自定义标签和过滤器
2017/07/03 Python
神经网络python源码分享
2017/12/15 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
基本款天堂:Everlane
2017/05/13 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
工作作风整顿个人剖析材料
2014/10/11 职场文书
教师见习总结范文
2015/06/23 职场文书
干部考核工作总结
2015/08/12 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书