首页 / AJAX / Ajax上传图片及先预览功能的实现方法

Ajax上传图片及先预览功能的实现方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Ajax上传图片及先预览功能的实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5484字，纯文字阅读大概需要8分钟。

内容图文

最近有几个小项目用到了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>
<p id="preview"></p>
<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 prevp = document.getElementById('preview');
  if (file.files && file.files[0]) {
   var reader = new FileReader();
   reader.onload = function (evt) {
    prevp.innerHTML = '<img src="' + evt.target.result + '" />';
   }
   reader.readAsDataURL(file.files[0]);
  } else {
   prevp.innerHTML = '<p class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></p>';
  }
 }
</script>
</body>
</html>

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

实现效果如下：

Ajax上传图片及先预览功能的实现方法 - 文章图片

方式二

除了这种方式之外我们也可以采用网上现成的一个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 p = obj.parent("p")[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("p").css({
       'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
       'width': opts.Width + 'px',
       'height': opts.Height + 'px'
      });
      p.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>
<p><img id="ImgPr" width="200" height="200"/></p>
<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上传图片文件

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用法一致了。

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

内容总结

以上是互联网集市为您收集整理的Ajax上传图片及先预览功能的实现方法全部内容，希望文章能够帮你解决Ajax上传图片及先预览功能的实现方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/140595.html

来源：【匿名】

【上一篇】详解表单上传实现ajax文件异步上传【下一篇】AJAX for PHP简单表数据查询实例

更多 ►

【Ajax上传图片及先预览功能的实现方法】教程文章相关的互联网学习教程文章

ajax上传图片加裁剪作为头像

网上功能一大把。但是听说一个常用的（经常被搜到的）Jcorp+uploadify 用在laravel 里会报302错误。不知道哪个版本的jcorp 哪个版本的uploadify 哪个版本的laravel 仔细想想uploadify 与laravel 冲突可能性又大又不大。算了时间有限+uploadify 太重（偷懒的借口）直接用另一个方案：http://www.cnblogs.com/abel/archive/2013/07/24/3213409.htmlhttp://blog.csdn.net/zhangfei8625/article/details/43057163原文：http://www.cnb...

Mvc之Ajax上传图片【代码】

MyAjaxForm下载地址，点击此处下载视图部分：@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml"; }<h2>Index</h2> <form id="fm1" method="post"><input type="file" id="btnfile" name="btnfile" value="提交" /><input type="button" id="btn" value="上传" /> </form> <div id="divimg"></div> @section scripts{ <script src="/scripts/MyAjaxForm.js" type="text/javascript"></script> <script type="te...

Ajax简单异步上传图片并回显【代码】

前台代码上传图片按钮<a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</a>隐藏的文件选择器<input type="file" id="photoFile" style="display: none;" onchange="upload()">图片预览<img id="preview_photo" src="" width="200px" height="200px">去除图片预览未选择时默认时的边框<style>img[src=""],img:not([src]){opacity:0;} </style>JavaScript部分<script>function uploadPhoto() {$("#photoFile").click(...

thinkPHP利用ajax异步上传图片并显示、删除的示例【图】

近来学习tp5的过程中，项目中有个发帖功能，选择主题图片。如下：利用原始的文件上传处理，虽然通过原始js语句能实时显示上传图片，但是这样的话会涉及很多兼容问题。使用ajax技术，实现选择性删除所选图片功能，并不会有兼容问题。表单文件form： <form method="post" enctype="multipart/form-data"> <div style="margin: 20px 20px 20px 10px;">主题图片:<span id="img-list-box" style="margin-left: 25px;"></span><span sty...

php+ajax无刷新上传图片实例代码【图】

本文分享了php结合ajax实现无刷新上传图片的实例代码，分享给大家，希望大家可以和小编一起学习学习，共同进步。 1.引入文件 <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js"></script> <link href="/css/uploadImg.css" rel="stylesheet" type="text/css" />  2.html部分<div class="upimg"><input name="icon...

为什么微信浏览器通过Ajax上传图片,XMLHttpRequest的readyState始终保持在1？

PHP网站在用安卓手机的微信浏览器访问时，上传图片的部分XMLHttpRequest的readyState始终保持在1，同样的程序在手机（及PC端）Chrome浏览器及苹果手机的微信浏览器中全都正常，只有安卓机的微信浏览器中无法完成上传过程，就卡在这个readyState为1(open)的状态上了，去网上查了一些文章，开始找到一篇在微信中调用ajax出现的问题，说微信浏览器没有内建的XMLHttpRequest，但他的状态是始终为0，另一篇文章readyState状态值始终为1的...

PHP-Ajax实现异步上传图片到新浪图床【代码】

通过异步上传图片到新浪图床，并且获取图片外链地址。一、填坑1.页面中必须引用Jquery库，否则没办法实现异步请求，这里使用的百度的Jquery库。<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>2.相关资料连接新浪图床上传接口源码有部分人拿到这个接口源码并不会使用，起初我也不是很明白，也是慢慢搞懂的，感谢接口作者的分享。相关推荐：《PHP教程》二、实现代码1.图床接口源码，只需要修改源码里面的...

thinkphp下多图ajax上传图片

这篇文章主要介绍了关于thinkphp 下多图ajax上传图片，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下碰到一个项目，有一个比较繁琐的功能6个ajax上传，基本上每个上传逻辑多不一样，记录一下thinkphp的view页面：id方便找到这个元素 name一定要加 [ ]<div class="btns"><a href="javascript:;" class="a-upload"><input type="file" id="fileaq" name="fileaq[]" data-filesType="words" class="uploadInput" mul...

php+html5+ajax实现上传图片的方法及实例

这篇文章主要介绍了php+html5+ajax实现上传图片的方法,对比分析了js原生及jQuery两种ajax调用上传图片的方法,以及php图片上传处理等技巧,需要的朋友可以参考下具体如下：<?php if (isset($_POST[upload])) {var_dump($_FILES);move_uploaded_file($_FILES[upfile][tmp_name], up_tmp/.time()..dat);//header(location: test.php);exit; } ?><!doctype html> <html lang="zh"> <head><meta charset="utf-8"><title>HTML5 Ajax Uploa...

php+ajax实现带进度条的上传图片功能实例详解【图】

这篇文章主要介绍了php+ajax实现带进度条的上传图片功能,涉及php文件传输及ajax无刷新提交的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下运行效果图如下：代码如下：<?php if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK) {############ Edit settings ##############$UploadDirectory = F:/Websites/file_upload/uploads/; //specify upload directory ends with / (sla...

php+ajax无刷新上传图片的实现方法【图】

这篇文章主要介绍了php+ajax无刷新上传图片的实现方法,涉及php结合ajax进行文件传输操作相关技巧,需要的朋友可以参考下具体如下：1.引入文件 <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js"></script> <link href="/css/uploadImg.css" rel="stylesheet" type="text/css" /> 2.html部分<p class="upimg"> <inp...

PHP中ajax无刷新上传图片与图片下载功能的方法

本文给大家分享php ajax无刷新上传图片与图片下载功能的实现代码，非常不错，具有参考借鉴价值，需要的的朋友参考下php ajax无刷新上传图片与图片下载功能的实现代码如下所示：<meta charset="utf-8" > <form id= "uploadForm"> <p >指定文件名： <input type="text" name="filename" value= ""/></p > <p> 上传文件： <input type="file" name="photo" onchange="showPreview(this)" class="file" /> <img id="portrait" src="...

Yii+upload实现AJAX上传图片的方法

这篇文章主要介绍了Yii+upload实现AJAX上传图片的方法，分析了Yii结合upload插件实现ajax上传的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下本文实例讲述了Yii+upload实现AJAX上传图片的方法。分享给大家供大家参考，具体如下：控制器代码：/** * get ajax uploaded files. */ public function actionGetAjax(){$model=new Attachment();//加载附件模型$tmpFile = CUploadedFile::getInstanceByName(image);//读取图像上...

详解React、ajax、java实现上传图片并预览功能【图】

React+ajax+java如何实现上传图片并预览？本文就和大家分享一下React、ajax、java实现上传图片并预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。之前有在网上找ajax上传图片的资料，大部分的人写得都是用jQuery，但是在这里用JQuery就大才小用了，所以我就自己写了，先上图。由上图，首先点击上面的选择文件，在选择图片之后，将会自动上传图片到服务器，并且返回图片名字和图片在服务器的路径，...