图片预览

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     <script src="/static/jquery.min.js"></script>

 </head>

 <body>

 <!-- accept属性可以指定文件输入框选择的文件类型 -->

 <input type="file" id="img_checker" accept="image/*">

 <input type="button" onclick="upload()" value="上传">

 <hr>

 <img src="" id="show_img">

 <script>

     //给文件输入框绑定事件

     document.getElementById('img_checker').onchange = function () {

         var fileReader = new FileReader();

         //读取文件输入框已选择的文件

         fileReader.readAsDataURL(this.files[0]);

         //注册文件加载完毕之后的时间

         fileReader.onload = function () {

             //让img标签的src属性指向读取的文件

             document.getElementById('show_img').src = fileReader.result;

         }

     }

 </script>

 </body>

 </html>

Ajax文件上传

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     <script src="/static/jquery.min.js"></script>

 </head>

 <body>

 <!-- accept属性可以指定文件输入框选择的文件类型 -->

 <input type="file" id="img_checker" accept="image/*">

 <input type="button" onclick="upload()" value="上传">

 <hr>

 <img src="" id="show_img">

 <script>

     function upload() {

         //创建一个form数据对象

         var formData = new FormData()

         //将图片文件数据添加到form对象中

         formData.append('avatar', document.getElementById('img_checker').files[0])

         $.ajax(

             {

                 url: "/upload/",

                 type: "post",

                 //与普通Ajax提交不同的是，上传文件需要指定processData和contentType属性值为false，原来的data对象直接使用FormData对象

                 processData: false,

                 contentType: false,

                 data: formData,

                 success: function (data) {

                     alert(data)

                 }

             }

         )

         //此时后端就可以像接收传统form表单提交的数据方式接收图片

     }

 </script>

 </body>

 </html>

H5-FileReader实现图片预览&Ajax上传文件的更多相关文章

  1. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  2. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  3. 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  4. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  5. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  6. js-jssdk微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）

    值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回:  res.localIds用于上传图片使用    上传图片:wx.uploadImage. 2.上传图片的时候 ...

  7. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  8. php ajax bootstrap多文件上传图片预览，ajax上传文件

    <form enctype="multipart/form-data" id="upForm"> <label class="btn ...

  9. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

随机推荐

  1. JS =>处理单击事件与拖动事件并存

    使用click事件,很难确定在拖动开始和结束的时候触发,所以使用了onmouseup(释放鼠标的时候),释放鼠标的时候,即在拖动还未结束,但是准备处理的阶段,此时mouseButtonFlag按照逻辑 ...

  2. android基础---->service的生命周期

    服务是一个应用程序组件代表应用程序执行一个长时间操作的行为,虽然不与用户交互或供应功能供其它应用程序使用.它和其他的应用对象一样,在他的宿主进程的主线程中运行.今天我们开始android中普通serv ...

  3. css3整理--calc()

    calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的widt ...

  4. docker 搭建ntp服务器

    背景 在搭建etcd集群时,如果主机时间相差太多会出现同步错误,如果外部网络不可用时,需要使用内部的ntp服务器同步时间. 构建ntp镜像 创建Dockerfile # usage: # docker ...

  5. Arduino数字引脚作为GPIO的使用

    引脚与GPIO的关系 引脚(pin)是对芯片的外部物理接口的一个称呼,它是在不把这个物理接口投入到具体应用场合下的称呼.例如,我们可以说,某某芯片的P1.5引脚可以作为数字输出驱动外部数字设备,也可以 ...

  6. 第39级台阶|2013年蓝桥杯B组题解析第三题-fishers

    第39级台阶 小明刚刚看完电影<第39级台阶>,离开电影院的时候,他数了数礼堂前的台阶数,恰好是39级! 站在台阶前,他突然又想着一个问题: 如果我每一步只能迈上1个或2个台阶.先迈左脚, ...

  7. python-and和 or用法

    python中的逻辑运算 and和or执行逻辑运算,但是它们不会返回bool值,而是返回它们进行比较的值之一 and >>> 1 and 2 取2 >>>1 and ...

  8. svn的安装方法

    SVN的安装很常用.但是我好像经常用了之后就忘记.这次把笔记放在这里,如果以后忘了,就可以随时查看了. 步骤: 一.下载SVN 这里常用的是site.zip. 之前是手头有现成的site.zip.今天 ...

  9. [No0000127]WCF安全体系netTCPBinding绑定

    netTCPBinding绑定之Transport安全模式 一.netTCPBinding 此绑定使用TCP传输协议,不具交互性,只适用于 WCF 到 WCF 的通信. 此绑定的传输安全性的实现:  ...

  10. [No0000BB]ReSharper操作指南4/16-配置ReSharper代码快修与导航

    代码问题的快速修复 ReSharper可以帮助您立即修复设计时检测到的大部分代码问题.就像按Alt+Enter突出显示的代码问题一样简单,并选择合适的方法来解决问题或改进次优代码. GIF 应用快速修 ...