记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能。当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能。

  今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上。

1、闲话少说,测试一下,图片上传前预览(选择图片):

 

实现代码:

  1. <div style="border:2px dashed red;">
  2. <p>
  3. 图片上传前预览:<input type="file" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"/>
  4. <input type="button" value="隐藏图片" onclick="document.getElementById('xmTanImg').style.display = 'none';"/>
  5. <input type="button" value="显示图片" onclick="document.getElementById('xmTanImg').style.display = 'block';"/>
  6. </p>
  7. <img id="xmTanImg"/>
  8. <div id="xmTanDiv"></div>
  9. </div>
  10. <hr />
  11. <script type="text/javascript">
  12. //判断浏览器是否支持FileReader接口
  13. if (typeof FileReader == 'undefined') {
  14. document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
  15. //使选择控件不可操作
  16. document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
  17. }
  18.  
  19. //选择图片,马上预览
  20. function xmTanUploadImg(obj) {
  21. var file = obj.files[0];
  22.  
  23. console.log(obj);console.log(file);
  24. console.log("file.size = " + file.size); //file.size 单位为byte
  25.  
  26. var reader = new FileReader();
  27.  
  28. //读取文件过程方法
  29. reader.onloadstart = function (e) {
  30. console.log("开始读取....");
  31. }
  32. reader.onprogress = function (e) {
  33. console.log("正在读取中....");
  34. }
  35. reader.onabort = function (e) {
  36. console.log("中断读取....");
  37. }
  38. reader.onerror = function (e) {
  39. console.log("读取异常....");
  40. }
  41. reader.onload = function (e) {
  42. console.log("成功读取....");
  43.  
  44. var img = document.getElementById("xmTanImg");
  45. img.src = e.target.result;
  46. //或者 img.src = this.result; //e.target == this
  47. }
  48.  
  49. reader.readAsDataURL(file)
  50. }
  51. </script>

-------------------------------  end  -----------------------------

2、另外 FileReader除了有函数readAsDataURL,另外还有另外两个函数readAsBinaryString 和 readAsText,分别可以将选择的文件读取成二进制和文本格式

测试一下,选择文本(txt、cs、html、js、css、xml),读取成二进制或者文本:

选择文件:

 

实现代码:

  1. <script type="text/javascript">
  2. //判断浏览器是否支持FileReader接口
  3. if (typeof FileReader == 'undefined') {
  4. document.getElementById("xmTanContentDiv").InnerHTML = "<p>当前浏览器不支持FileReader接口!</p>";
  5. document.getElementById("xmTanFile").setAttribute("disabled", "disabled");
  6. }
  7.  
  8. //选择文件
  9. function xmTanUploadFile(obj){
  10. if (obj.files.length < 1) return;
  11.  
  12. var file = obj.files[0];
  13.  
  14. if (file.size > 1024 * 1024) {
  15. alert("文件大于1M, 太大了,小点吧!");
  16. obj.value = "";
  17. return;
  18. }
  19. }
  20.  
  21. //读取文件为二进制
  22. function readAsBinaryString() {
  23. var obj = document.getElementById("xmTanFile");
  24. if (obj.files.length < 1) return;
  25.  
  26. var file = obj.files[0];
  27. var reader = new FileReader();
  28.  
  29. //将文件以二进制形式读入页面
  30. reader.readAsBinaryString(file);
  31. reader.onload = function (f) {
  32. document.getElementById("xmTanContentDiv").innerHTML = this.result;
  33. }
  34. }
  35.  
  36. //读取文件为文本
  37. function readAsText() {
  38. var obj = document.getElementById("xmTanFile");
  39. if (obj.files.length < 1) return;
  40.  
  41. var file = obj.files[0];
  42. var reader = new FileReader();
  43.  
  44. //将文件以文本形式读入页面
  45. reader.readAsText(file);
  46. reader.onload = function (f) {
  47. document.getElementById("xmTanContentDiv").innerHTML = this.result;
  48. }
  49. }
  50. </script>
  51. <div style="border: 2px dashed red; padding: 20px 0px;">
  52. <label>选择文件:</label>
  53. <input type="file" id="xmTanFile" accept=".html,.js,.css,.txt,.cs,.xml" onchange="xmTanUploadFile(this)"/>
  54. <input type="button" value="读取成二进制数据" onclick="readAsBinaryString()" />
  55. <input type="button" value="读取成文本数据" onclick="readAsText()" />
  56. <input type="button" value="隐藏读取内容" onclick="document.getElementById('xmTanContentDiv').style.display = 'none';"/>
  57. <input type="button" value="显示读取内容" onclick="document.getElementById('xmTanContentDiv').style.display = 'block';"/>
  58. <div id="xmTanContentDiv"></div>
  59. </div>

---------------------------

3、----------- a标签之download属性 -------------

   设置a标签href为图片链接,再设置download属性,点此链接可以直接下载图片

  

点此下载

实现代码:

  1. <div style="text-align:center; padding: 5px 20px;width: 70%;">
  2. <img id="xmTanShowImg" src=""/>
  3. <h1><a href="javascript:void()" download="girl.jpg" id="xmTanDownload">点此下载</a></h1>
  4. </div>
  5. <script type="text/javascript">
  6. //图片转成base64位字符串数据
  7. var imgData = "data:image/png;base64,.......";
  8. //或直接设置图片链接: var imgData = "images/girl.png"; //设置图片链接时,如果图片和页面在同一个网站,直接设置即可;如果图片和页面不在同一个域名,服务器需要处理跨域问题,否则会报错
  9.  
  10. document.getElementById("xmTanShowImg").setAttribute("src", imgData); //给图片标签设置src
  11. document.getElementById("xmTanDownload").setAttribute("href", imgData); //给a标签设置href
  12. </script>

4、网络图片(完整图片地址)转base64和文件流 (2018-11-01 add )

  突然有这个需求:要求把裁剪后的图片(返回一个网络地址)以文件流的方式上传到服务器。

因此需要把一个网络图片转成base64, 再转成文件流格式:

  1. //传入图片地址,获取图片Base64数据
  2. function getBase64ByImgUrl(url, callback){
  3. var canvas = document.createElement('canvas'),
  4. ctx = canvas.getContext('2d'),
  5. img = new Image;
  6. img.crossOrigin = 'Anonymous';
  7.  
  8. img.onload = function(){
  9. canvas.height = img.height;
  10. canvas.width = img.width;
  11. ctx.drawImage(img,0,0);
  12. var dataURL = canvas.toDataURL('image/png');
  13.  
  14. console.log('base64-dataUrl: ', dataURL);
  15.  
  16. callback(dataURL);
  17. canvas = null;
  18. };
  19. img.src = url;
  20. }
  21.  
  22. //将base64转换为文件流
  23. function getFileByBase64(dataurl, filename) {
  24. var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  25. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  26. while(n--){
  27. u8arr[n] = bstr.charCodeAt(n);
  28. }
  29. return new File([u8arr], filename, {type:mime});
  30. }
  31.  
  32. //测试
  33. var url = 'https://images2015.cnblogs.com/blog/454511/201601/454511-20160131134129224-636191193.png';
  34. getBase64ByImgUrl(url, function(dataURL){
  35.  
  36. //传入base64数据和文件名字
  37. var fileFlow = getFileByBase64(dataURL, 'imgName' + (new Date()).getTime());
  38. console.log('fileFlow: ', fileFlow);
  39.  
  40. //继续....
  41. })

file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流的更多相关文章

  1. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  2. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  4. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  5. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  6. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  7. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  9. 图片上传前预览、压缩、转blob、转formData等操作

    直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...

随机推荐

  1. 【翻译】Chemkin - Chapter 1

    [这段文字是2013年3月翻译的,整理老文档时发现就拿出来,提醒我们:任何试图翻译英文手册的尝试都是徒劳的] 第一章   介绍 Chemkin理论手册提供了一个对关系和公式的宽泛的概览,这些关系和公式 ...

  2. tomcat 嵌入式

    背景 开源世界真是有意思,竟然还有这种玩法.以前一直想bs程序如何像cs程序作为安装包形式,这个就是个解决方案. 知识点 将tomcat嵌入到主程序中进行运行,而不是像以前将一个web项目copy到t ...

  3. linux mount -t -o 用法

    挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的. 命令格式: mount [-t vfstype] [-o optio ...

  4. WPA简介

    摘选自 https://www.sohu.com/a/199641521_683126 WPA 全名 WI-FI Protected Access, 有WPA 和WPA2两个标准,是一种保护无线网络的 ...

  5. 【原创】运维基础之Docker(5)docker部署airflow

    部署方式:docker+airflow+mysql+LocalExecutor 使用airflow的docker镜像 https://hub.docker.com/r/puckel/docker-ai ...

  6. HTML5 WebSocket 协议

    1. 概述 1.1 说明 WebSocket:是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议. WebSocket原理是使用JavaScript调用浏览器的API发出一个WebSoc ...

  7. GoLand使用

    # 不定期更新 什么是GoLand GoLand是JetBrains出品的一个Go语言IDE,JB的IDE有多好用我想很多程序员都知道,个人感觉唯一的缺点就是比较大(因为功能多) 希望大家多多支持正版 ...

  8. 用docker快速搭建wordpress博客

      WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在Windows上可 ...

  9. Vue项目构建开发笔记(vue-lic3.0构建的)

    1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...

  10. Android 组件化方案探索与思考

    Android 组件化方案探索与思考 组件化项目,通过gradle脚本,实现module在编译期隔离,运行期按需加载,实现组件间解耦,高效单独调试. 本项目github地址 https://githu ...