Ajax上传图片及上传前先预览功能实例代码

转载  更新时间:2017年08月26日 13:30:00   作者:_江南一点雨   我要评论

在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,下面通过本文给大家分享解决Ajax上传图片及上传前先预览功能,感兴趣的朋友参考下吧

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成。在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下。

上传之前的预览

方式一

先来说说图片上传之前的预览问题。这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口。我们来看看实现方式:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Ajax上传文件</title>
 <script src="jquery-3.2.1.js"></script>
</head>
<body>
用户名:<input id="username" type="text"><br>
用户图像:<input id="userface" type="file" onchange="preview(this)"><br>
<div id="preview"></div>
<input type="button" id="btnClick" value="上传">
<script>
 $("#btnClick").click(function () {
  var formData = new FormData();
  formData.append("username", $("#username").val());
  formData.append("file", $("#userface")[0].files[0]);
  $.ajax({
   url: '/fileupload',
   type: 'post',
   data: formData,
   processData: false,
   contentType: false,
   success: function (msg) {
    alert(msg);
   }
  });
 });
 function preview(file) {
  var prevDiv = document.getElementById('preview');
  if (file.files && file.files[0]) {
   var reader = new FileReader();
   reader.onload = function (evt) {
    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
   }
   reader.readAsDataURL(file.files[0]);
  } else {
   prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
  }
 }
</script>
</body>
</html>

这里对于支持FileReader的浏览器直接使用FileReader来实现,不支持FileReader的浏览器则采用微软的滤镜来实现(注意给图片上传的input标签设置onchange函数)。

实现效果如下:

这里写图片描述

方式二

除了这种方式之外我们也可以采用网上现成的一个jQuery实现的方式。这里主要参考了这里。

不过由于原文年代久远,里边使用的$.browser.msie从jQuery1.9就被移除掉了,所以如果我们想使用这个得做一点额外的处理,我修改后的uploadPreview.js文件内容如下:

jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
jQuery.fn.extend({
 uploadPreview: function (opts) {
  var _self = this,
   _this = $(this);
  opts = jQuery.extend({
   Img: "ImgPr",
   Width: 100,
   Height: 100,
   ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
   Callback: function () {}
  }, opts || {});
  _self.getObjectURL = function (file) {
   var url = null;
   if (window.createObjectURL != undefined) {
    url = window.createObjectURL(file)
   } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file)
   } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file)
   }
   return url
  };
  _this.change(function () {
   if (this.value) {
    if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
     alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
     this.value = "";
     return false
    }
    if ($.browser.msie) {
     try {
      $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
     } catch (e) {
      var src = "";
      var obj = $("#" + opts.Img);
      var div = obj.parent("div")[0];
      _self.select();
      if (top != self) {
       window.parent.document.body.focus()
      } else {
       _self.blur()
      }
      src = document.selection.createRange().text;
      document.selection.empty();
      obj.hide();
      obj.parent("div").css({
       'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
       'width': opts.Width + 'px',
       'height': opts.Height + 'px'
      });
      div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
     }
    } else {
     $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
    }
    opts.Callback()
   }
  })
 }
});

然后在我们的html文件中引入这个js文件即可:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Ajax上传文件</title>
 <script src="jquery-3.2.1.js"></script>
 <script src="uploadPreview.js"></script>
</head>
<body>
用户名:<input id="username" type="text"><br>
用户图像:<input id="userface" type="file" onchange="preview(this)"><br>
<div><img id="ImgPr" width="200" height="200"/></div>
<input type="button" id="btnClick" value="上传">
<script>
 $("#btnClick").click(function () {
  var formData = new FormData();
  formData.append("username", $("#username").val());
  formData.append("file", $("#userface")[0].files[0]);
  $.ajax({
   url: '/fileupload',
   type: 'post',
   data: formData,
   processData: false,
   contentType: false,
   success: function (msg) {
    alert(msg);
   }
  });
 });
 $("#userface").uploadPreview({Img: "ImgPr", Width: 120, Height: 120});
</script>
</body>
</html>

这里有如下几点需要注意:

1.HTML页面中要引入我们自定义的uploadPreview.js文件

2.预先定义好要显示预览图片的img标签,该标签要有id。

3.查找到img标签然后调用uploadPreview函数

执行效果如下:

这里写图片描述

Ajax上传图片文件

Ajax上传图片文件就简单了,没有那么多方案,核心代码如下:

 var formData = new FormData();
  formData.append("username", $("#username").val());
  formData.append("file", $("#userface")[0].files[0]);
  $.ajax({
   url: '/fileupload',
   type: 'post',
   data: formData,
   processData: false,
   contentType: false,
   success: function (msg) {
    alert(msg);
   }
  });

核心就是定义一个FormData对象,将要上传的数据包装到这个对象中去。然后在ajax上传数据的时候设置data属性就为formdata,processData属性设置为false,表示jquery不要去处理发送的数据,然后设置contentType属性的值为false,表示不要设置请求头的contentType属性。OK,主要就是设置这三个,设置成功之后,其他的处理就和常规的ajax用法一致了。

后台的处理代码大家可以在文末的案例中下载,这里我就不展示不出来了。

源码下载:http://xiazai.jb51.net/201707/yuanma/AjaxFileUpload.rar

总结

以上所述是小编给大家介绍的Ajax上传图片及上传前先预览功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • HTML5 Ajax文件上传进度条如何显示

    HTML5 Ajax文件上传进度条如何显示

    这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • AJAX应用中必须要掌握的重点知识(分享)

    AJAX应用中必须要掌握的重点知识(分享)

    下面小编就为大家带来一篇AJAX应用中必须要掌握的重点知识(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    本文给大家分享jquery ajax实例文章,由于jquery在异步提交方面封装的非常好,直接用ajax非常麻烦,jquery大大简化了我们的操作,不用考虑浏览器的问题了。对jquery ajax实例相关介绍感兴趣的朋友一起学习吧
    2015-11-11
  • 比getjson好的底层函数是哪个有什么优点

    比getjson好的底层函数是哪个有什么优点

    比getjson好的底层函数优点在于如果网络出问题了,可以通过error方法来告诉用户出错,需要的朋友可以参考下
    2014-02-02
  • Ajax获得站点文件内容实例

    Ajax获得站点文件内容实例

    Ajax获得站点文件内容实例:选择一部著作,会通过 Ajax 实时获得相关的名字,具体实现如下,感兴趣的朋友可以参考下
    2013-09-09
  • Ajax实现城市二级联动(三)

    Ajax实现城市二级联动(三)

    这篇文章主要为大家详细介绍了Ajax实现城市二级联动的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • AJAX和JSP混合使用方法实例

    AJAX和JSP混合使用方法实例

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。下面通过本文给大家介绍AJAX和JSP混合使用方法实例,感兴趣的朋友一起学习吧
    2016-02-02
  • 利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据,大大简化了带宽的压力
    2014-05-05
  • AJAX中文乱码解决新方法分享

    AJAX中文乱码解决新方法分享

    用过AJAX的朋友肯定知道javascript是使用UTF-8国际编码,即每个汉字用3个字节来存储,但是这就造成了用AJAX来send数据的时候出现乱码。
    2014-05-05
  • 极致体验ajax局部和整体刷新

    极致体验ajax局部和整体刷新

    本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新,通过封装三个属性然后我们来使用,以此达到我们想要的效果,本文写的非常好,感兴趣的朋友一起看看吧
    2015-09-09

最新评论