图片预览

 <!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. sencha touch 在新版谷歌浏览器中painted事件无法触发解决方案以及carousel 控件、togglefield控件、滚动条失效

    在2.3/2.4版本中,新版谷歌浏览器(43.44版本)里面painted事件是不会触发的,以及carousel 控件.togglefield控件.滚动条失效,官方的解决方案如下,测试可用 会出现这个 ...

  2. OpenCV 1.0在VC6下安装与配置（附测试程序）

    步骤: 1 安装Visual C++ 6.0         2 安装OpenCV 1.0        3 配置Windows环境变量         4 配置Visual C++ 6.0     ...

  3. E - Train Problem I

    As the new term comes, the Ignatius Train Station is very busy nowadays. A lot of student want to ge ...

  4. Code Labels

    Code Labels Code labels are three-letter codes with which commit messages can be prefixed. CODE Labe ...

  5. C++设计实现一个不能被继承的类

    C++不同于Java,Java中被final关键字修饰的类不能被继承,C++能实现不被继承的类,但是需要自己实现. 为了使类不被继承,最好的办法是使子类不能构造父类的部分,此时子类就无法实例化整个子类 ...

  6. windous----操作系统基础

    操作系统基础 服务软件,控制硬件. 一:什么事操作系统 操作系统就是一个协调,管理和控制和计算机硬件资源控制程序.  用户态:运行应用程序,不可以操作硬件(可以获取cpu的指令集的一个子集,该子集不包 ...

  7. String和datetime在SQL中和在C#中相互转换方法总结

    Custom Date and Time Format Strings   <= https://docs.microsoft.com/en-us/dotnet/standard/base-ty ...

  8. 如何选择windows 10 系统中默认打开程序

    有时候我们会遇到打开某些文件需要通过open with 选择打开的应用程序,然后再点选always open with. 但是有时候这个方法不起作用,我们可以用如下方法: 1.从settings找到a ...

  9. Python全栈-magedu-2018-笔记11

    第三章 - Python 内置数据结构 简单选择排序 简单选择排序 属于选择排序 两两比较大小,找出极值(极大值或极小值)被放置在固定的位置,这个固定位置一般指的是某一端 结果分为升序和降序排列 降序 ...

  10. Error:..\FreeRTOS\portable\RVDS\ARM_CM3\port.c,378 Error:..\FreeRTOS\portable\RVDS\ARM_CM3\port.c,378 Error:..\FreeRTOS\portable\RVDS\ARM_CM3\port.c,378 Error:..\FreeRTOS\tasks.c,2806

    Error:..\FreeRTOS\portable\RVDS\ARM_CM3\port.c,378Error:..\FreeRTOS\portable\RVDS\ARM_CM3\port.c,378 ...