图片预览

 <!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. 【Oracle】删除所有表

    BEGIN FOR cur_rec IN (SELECT object_name, object_type FROM user_objects WHERE object_type IN ('TABLE ...

  2. [ASP.NET MVC]视图是如何呈现的

    为了搞清楚ASP.NET MVC的请求过程,我们计划从结果追踪到源头.使用VS2012创建一个空白的ASP.NET MVC项目 然后创建一个HelloController 创建一个HelloView. ...

  3. G - SDOI

    The Annual National Olympic of Information(NOI) will be held.The province of Shandong hold a Select( ...

  4. C#打印标签

    一个复杂的标签包括一个复杂的表格样式和二维码.条形码等内容.所以如果直接绘制的方式将会非常的麻烦,所以采用使用的方案是使用模板的方式:1.使用Excel创建出想要的模板的样式.2.对模板中的动态内容进 ...

  5. vue setTimeout 注销

    vue在切换页面时,销毁了上衣个组件,上一个页面的也要相应的setTimeout 注销: setTimeout(function () { if(that && !that._isDe ...

  6. 安装指定版本的nodejs

    node有一个模块n,是专门用来管理node.js的版本的. 1.安装n模块: npm install -g n 2.升级node.js到最新稳定版 n stable 3.安装指定版本: n v6.1 ...

  7. nowcoder 206A - Birthday - [最小费用最大流]

    题目链接:https://www.nowcoder.com/acm/contest/206/A 题目描述 恬恬的生日临近了.宇扬给她准备了一个蛋糕.正如往常一样,宇扬在蛋糕上插了n支蜡烛,并把蛋糕分为 ...

  8. hbase运行mapreduce设置及基本数据加载方法

    hbase与mapreduce集成后,运行mapreduce程序,同时需要mapreduce jar和hbase jar文件的支持,这时我们需要通过特殊设置使任务可以同时读取到hadoop jar和h ...

  9. Concurrent Execution

    Concurrent Execution — Python 3.7.2 documentation https://docs.python.org/3/library/concurrency.html

  10. data-original

    <img class="lazy" style="display: inline;" alt="开光纯铜牛摆件" src=" ...