图片预览

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>test</title>
  6.      <script src="/static/jquery.min.js"></script>
  7.  </head>
  8.  <body>
  9.  <!-- accept属性可以指定文件输入框选择的文件类型 -->
  10.  <input type="file" id="img_checker" accept="image/*">
  11.  <input type="button" onclick="upload()" value="上传">
  12.  <hr>
  13.  <img src="" id="show_img">
  14.  <script>
  15.      //给文件输入框绑定事件
  16.      document.getElementById('img_checker').onchange = function () {
  17.          var fileReader = new FileReader();
  18.          //读取文件输入框已选择的文件
  19.          fileReader.readAsDataURL(this.files[0]);
  20.          //注册文件加载完毕之后的时间
  21.          fileReader.onload = function () {
  22.              //让img标签的src属性指向读取的文件
  23.              document.getElementById('show_img').src = fileReader.result;
  24.          }
  25.      }
  26.  </script>
  27.  </body>
  28.  </html>

Ajax文件上传

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>test</title>
  6.      <script src="/static/jquery.min.js"></script>
  7.  </head>
  8.  <body>
  9.  <!-- accept属性可以指定文件输入框选择的文件类型 -->
  10.  <input type="file" id="img_checker" accept="image/*">
  11.  <input type="button" onclick="upload()" value="上传">
  12.  <hr>
  13.  <img src="" id="show_img">
  14.  
  15.  <script>
  16.      function upload() {
  17.          //创建一个form数据对象
  18.          var formData = new FormData()
  19.          //将图片文件数据添加到form对象中
  20.          formData.append('avatar', document.getElementById('img_checker').files[0])
  21.          $.ajax(
  22.              {
  23.                  url: "/upload/",
  24.                  type: "post",
  25.                  //与普通Ajax提交不同的是，上传文件需要指定processData和contentType属性值为false，原来的data对象直接使用FormData对象
  26.                  processData: false,
  27.                  contentType: false,
  28.                  data: formData,
  29.                  success: function (data) {
  30.                      alert(data)
  31.                  }
  32.              }
  33.          )
  34.          //此时后端就可以像接收传统form表单提交的数据方式接收图片
  35.      }
  36.  </script>
  37.  </body>
  38.  </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. Android编译环境——ubuntu12.04上android2.3.4编译错误以及解决

    Android编译环境——ubuntu12.04上android2.3.4编译错误以及解决 分类: android应用开发2013-08-21 09:20 4222人阅读 评论(3) 收藏 举报 li ...

  2. IDEA自动编译设置

    ctrl+alt+s: ctrl+shift+alt+/:

  3. Linux环境部署

    1,开机初始化的配置 iptables -F # 清空防火墙 /etc/init.d/iptables stop # 关闭iptables setenforce # 暂停selinux 2,编译安装p ...

  4. Linux --Unbuntu php项目对应不同php版本

    直入主题 因服务器上项目使用php版本有不同要求,特此解决一下. 下载 服务器上已有php7.0版本,安装7.0的方法自行百度,apt-get管理工具可直接install安装 然后安装一下需要的版本. ...

  5. 洛谷 P1223排队接水【贪心】

    题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共两行,第一行为n:第二行分别 ...

  6. F#周报2019年第1期

    新闻 介绍versionsof.net InfoQ正在寻找F#社区的声音 使用F#开发端对端的实际应用 UnoPlatform上的F# Elmish 视频及幻灯片 事件溯源DIY02--事件,事件存储 ...

  7. okvis源码解读

    为相机图像提取brisk特征点,并设置描述子的提取方向为重力加速度在世界坐标系中的方向(0,0,1)

  8. [No000011A]Office Excel设置显示日期与星期

    设置excel日期格式,自定义,yyyy-mm-dd 上午/下午 hh:mm:ss AM/PM dddd aaaa

  9. 机器学习使用sklearn进行模型训练、预测和评价

    cross_val_score(model_name, x_samples, y_labels, cv=k) 作用:验证某个模型在某个训练集上的稳定性,输出k个预测精度. K折交叉验证(k-fold) ...

  10. 利用win10自带的虚拟机Hyper-V安装Centos7的步骤教程

    1.设置开启Hyper-V应用程序? 在搜索功能里输入 Hyper-V 然后点击选中的部分 2.全部选中框中的部分,然后重新启动电脑 3.在搜索功能里输入Hyper-V 打开 4.点击新建--> ...