图片预览

 <!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. 132、Android安全机制（2） Android Permission权限控制机制（转载）

    http://blog.csdn.net/vshuang/article/details/44001661 http://www.cnblogs.com/mengdd/p/4892856.html

  2. css3整理--background-origin

    background-origin语法: background-origin: padding-box || border-box || content-box 参数取值: padding-box(p ...

  3. css3整理--transition

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  4. 深入理解 Java 虚拟机之学习笔记(2)

    本节介绍 Java堆的OutOfMemoryError测试 Eclipse Memory Analyzer分析内存溢出 虚拟机栈和本地方法栈StackOverflowError测试 方法区和运行时常量 ...

  5. Go学习笔记（一）安装Go语言环境

    Go Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发,后来还加入 ...

  6. python3之文件操作

    一   打开文件   根目录在d盘的文件名为‘学习资料.txt’的文件 a)绝对路径(最开始的,根目录文件)例:    e:\学习资料.txt 相对路径   直接用文件名字 b)操作方式  只读  只 ...

  7. day_5.5 单例

    2018-5-5 15:00:25 单例 : 就是对象只有一个 ''' class main(object): __instance = None def __new__(cls,): if cls. ...

  8. Web（二）

    一.数据的传递--转发和重定向 1.创建一个login.jsp页面  <body>     <%-- action:我们需要提交的地址  method:请求的方式 --%>   ...

  9. SPRING的事务配置详解

    spring事务配置的两种方式: 1.基于XML的事务配置.2.基于注解方式的事务配置. 前言:在我们详细介绍spring的两种声明式事务管理之前,我们需要先理解这些概念 1)spring的事务管理是 ...

  10. css学习_文本有关的样式属性、sublime快捷生成标签

    1.css中color定义文本的颜色 写法:(最常用的是16进制的) 2.行间距    line-height 3.水平对齐方式   text-align left right  center 4.首 ...