图片预览

 <!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. 显示windows的音频的输入输出设备

    #include "stdafx.h" /************************音频的输入输出设备**************************/ #include ...

  2. NUC972 linux 烧录

    节介绍如何刻录uboot.kernel和文件系统到NAND Flash, 并且设定NUC970系列芯片从NAND Flash中开机.本节操作需要windows环境下进行.(初次连接电脑需要安装驱动) ...

  3. Shape使用

    <shape> <!-- 实心 --> <solid android:color="#ff9d77"/> <!-- 渐变 --> & ...

  4. hadoop源码学习(-)

    这是从hadoop源码中间截取的一个片段,你看看你能不能看懂:如果不能看懂,说明你的javase基础很差. private static class GroupFactory extends Coun ...

  5. web初级开发的那些坑

    1.在使用js原生的XMLHttpRequest加载.xml文件时,老是不对,按照书上的写的没错,后来才发现是我的web.xml文件中阻止了.xml文件的加载. 2.有关于string解析成json数 ...

  6. python3之end关键字

    end 关键字 关键字end可以用于将结果输出到同一行,或者在输出的末尾添加不同的字符,实例如下: #!/usr/bin/python3 # Fibonacci series: 斐波纳契数列 # 两个 ...

  7. ELK之elasticsearch6安装认证模块search guard

    参考:https://www.cnblogs.com/marility/p/9392645.html 1,安装环境及软件版本 程序 版本 安装方式  elasticsearch  6.3.1  rpm ...

  8. css学习_css写的位置

    !!!拿到一个页面后应该先写结构再写样式 结构由大到小,由外到里 样式最好按顺序加 position  .float . 颜色  背景  字体 等... 1.行内(内联)样式 2.内部样式表(按道理可 ...

  9. [No0000165]SQL 优化

    SELECT 标识选择哪些列FROM 标示从哪个表中选择WHERE 过滤条件GROUP BY 按字段数据分组HAVING 字句过滤分组结果集ORDER BY 序按字段排序 ASC( 默认) 序升序 D ...

  10. 在Spring的Bean注入中，即使你私有化构造函数，默认他还是会去调用你的私有构造函数去实例化

    在Spring的Bean注入中,即使你私有化构造函数,默认他还是会去调用你的私有构造函数去实例化. 如果我们想保证实例的单一性,就要在定义<bean>时加上factory-method=” ...