服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 基于ajax实现上传图片代码示例解析

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

2021-12-02 16:01王者归来！ JavaScript

这篇文章主要介绍了基于ajax实现上传图片代码示例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

js源码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
/// <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代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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类代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
[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枚举类：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/// <summary>
/// 提示消息类别
/// </summary>
public enum StatusMessageType
{
  /// <summary>
  /// 权限不足
  /// </summary>
  NoAccess = -2,
  /// <summary>
  /// 错误
  /// </summary>
  Error = -1,
  /// <summary>
  /// 成功
  /// </summary>
  Success = 1,
 
  /// <summary>
  /// 提示信息
  /// </summary>
  Hint = 0
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://www.cnblogs.com/mingweiyard/p/6426475.html

  • 上传图片
  • ajax

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    格斗 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图