file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能。当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能。
今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上。
1、闲话少说,测试一下,图片上传前预览(选择图片):
实现代码:
- <div style="border:2px dashed red;">
- <p>
- 图片上传前预览:<input type="file" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"/>
- <input type="button" value="隐藏图片" onclick="document.getElementById('xmTanImg').style.display = 'none';"/>
- <input type="button" value="显示图片" onclick="document.getElementById('xmTanImg').style.display = 'block';"/>
- </p>
- <img id="xmTanImg"/>
- <div id="xmTanDiv"></div>
- </div>
- <hr />
- <script type="text/javascript">
- //判断浏览器是否支持FileReader接口
- if (typeof FileReader == 'undefined') {
- document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
- //使选择控件不可操作
- document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
- }
- //选择图片,马上预览
- function xmTanUploadImg(obj) {
- var file = obj.files[0];
- console.log(obj);console.log(file);
- console.log("file.size = " + file.size); //file.size 单位为byte
- var reader = new FileReader();
- //读取文件过程方法
- reader.onloadstart = function (e) {
- console.log("开始读取....");
- }
- reader.onprogress = function (e) {
- console.log("正在读取中....");
- }
- reader.onabort = function (e) {
- console.log("中断读取....");
- }
- reader.onerror = function (e) {
- console.log("读取异常....");
- }
- reader.onload = function (e) {
- console.log("成功读取....");
- var img = document.getElementById("xmTanImg");
- img.src = e.target.result;
- //或者 img.src = this.result; //e.target == this
- }
- reader.readAsDataURL(file)
- }
- </script>
------------------------------- end -----------------------------
2、另外 FileReader除了有函数readAsDataURL,另外还有另外两个函数readAsBinaryString 和 readAsText,分别可以将选择的文件读取成二进制和文本格式
测试一下,选择文本(txt、cs、html、js、css、xml),读取成二进制或者文本:
实现代码:
- <script type="text/javascript">
- //判断浏览器是否支持FileReader接口
- if (typeof FileReader == 'undefined') {
- document.getElementById("xmTanContentDiv").InnerHTML = "<p>当前浏览器不支持FileReader接口!</p>";
- document.getElementById("xmTanFile").setAttribute("disabled", "disabled");
- }
- //选择文件
- function xmTanUploadFile(obj){
- if (obj.files.length < 1) return;
- var file = obj.files[0];
- if (file.size > 1024 * 1024) {
- alert("文件大于1M, 太大了,小点吧!");
- obj.value = "";
- return;
- }
- }
- //读取文件为二进制
- function readAsBinaryString() {
- var obj = document.getElementById("xmTanFile");
- if (obj.files.length < 1) return;
- var file = obj.files[0];
- var reader = new FileReader();
- //将文件以二进制形式读入页面
- reader.readAsBinaryString(file);
- reader.onload = function (f) {
- document.getElementById("xmTanContentDiv").innerHTML = this.result;
- }
- }
- //读取文件为文本
- function readAsText() {
- var obj = document.getElementById("xmTanFile");
- if (obj.files.length < 1) return;
- var file = obj.files[0];
- var reader = new FileReader();
- //将文件以文本形式读入页面
- reader.readAsText(file);
- reader.onload = function (f) {
- document.getElementById("xmTanContentDiv").innerHTML = this.result;
- }
- }
- </script>
- <div style="border: 2px dashed red; padding: 20px 0px;">
- <label>选择文件:</label>
- <input type="file" id="xmTanFile" accept=".html,.js,.css,.txt,.cs,.xml" onchange="xmTanUploadFile(this)"/>
- <input type="button" value="读取成二进制数据" onclick="readAsBinaryString()" />
- <input type="button" value="读取成文本数据" onclick="readAsText()" />
- <input type="button" value="隐藏读取内容" onclick="document.getElementById('xmTanContentDiv').style.display = 'none';"/>
- <input type="button" value="显示读取内容" onclick="document.getElementById('xmTanContentDiv').style.display = 'block';"/>
- <div id="xmTanContentDiv"></div>
- </div>
---------------------------
3、----------- a标签之download属性 -------------
设置a标签href为图片链接,再设置download属性,点此链接可以直接下载图片
点此下载
实现代码:
- <div style="text-align:center; padding: 5px 20px;width: 70%;">
- <img id="xmTanShowImg" src=""/>
- <h1><a href="javascript:void()" download="girl.jpg" id="xmTanDownload">点此下载</a></h1>
- </div>
- <script type="text/javascript">
- //图片转成base64位字符串数据
- var imgData = "data:image/png;base64,.......";
- //或直接设置图片链接: var imgData = "images/girl.png"; //设置图片链接时,如果图片和页面在同一个网站,直接设置即可;如果图片和页面不在同一个域名,服务器需要处理跨域问题,否则会报错
- document.getElementById("xmTanShowImg").setAttribute("src", imgData); //给图片标签设置src
- document.getElementById("xmTanDownload").setAttribute("href", imgData); //给a标签设置href
- </script>
4、网络图片(完整图片地址)转base64和文件流 (2018-11-01 add )
突然有这个需求:要求把裁剪后的图片(返回一个网络地址)以文件流的方式上传到服务器。
因此需要把一个网络图片转成base64, 再转成文件流格式:
- //传入图片地址,获取图片Base64数据
- function getBase64ByImgUrl(url, callback){
- var canvas = document.createElement('canvas'),
- ctx = canvas.getContext('2d'),
- img = new Image;
- img.crossOrigin = 'Anonymous';
- img.onload = function(){
- canvas.height = img.height;
- canvas.width = img.width;
- ctx.drawImage(img,0,0);
- var dataURL = canvas.toDataURL('image/png');
- console.log('base64-dataUrl: ', dataURL);
- callback(dataURL);
- canvas = null;
- };
- img.src = url;
- }
- //将base64转换为文件流
- function getFileByBase64(dataurl, filename) {
- var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
- bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
- while(n--){
- u8arr[n] = bstr.charCodeAt(n);
- }
- return new File([u8arr], filename, {type:mime});
- }
- //测试
- var url = 'https://images2015.cnblogs.com/blog/454511/201601/454511-20160131134129224-636191193.png';
- getBase64ByImgUrl(url, function(dataURL){
- //传入base64数据和文件名字
- var fileFlow = getFileByBase64(dataURL, 'imgName' + (new Date()).getTime());
- console.log('fileFlow: ', fileFlow);
- //继续....
- })
file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流的更多相关文章
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- HTML5 FileReader实现图片上传前预览
如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...
- 图片上传前预览、压缩、转blob、转formData等操作
直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...
随机推荐
- 【翻译】Chemkin - Chapter 1
[这段文字是2013年3月翻译的,整理老文档时发现就拿出来,提醒我们:任何试图翻译英文手册的尝试都是徒劳的] 第一章 介绍 Chemkin理论手册提供了一个对关系和公式的宽泛的概览,这些关系和公式 ...
- tomcat 嵌入式
背景 开源世界真是有意思,竟然还有这种玩法.以前一直想bs程序如何像cs程序作为安装包形式,这个就是个解决方案. 知识点 将tomcat嵌入到主程序中进行运行,而不是像以前将一个web项目copy到t ...
- linux mount -t -o 用法
挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的. 命令格式: mount [-t vfstype] [-o optio ...
- WPA简介
摘选自 https://www.sohu.com/a/199641521_683126 WPA 全名 WI-FI Protected Access, 有WPA 和WPA2两个标准,是一种保护无线网络的 ...
- 【原创】运维基础之Docker(5)docker部署airflow
部署方式:docker+airflow+mysql+LocalExecutor 使用airflow的docker镜像 https://hub.docker.com/r/puckel/docker-ai ...
- HTML5 WebSocket 协议
1. 概述 1.1 说明 WebSocket:是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议. WebSocket原理是使用JavaScript调用浏览器的API发出一个WebSoc ...
- GoLand使用
# 不定期更新 什么是GoLand GoLand是JetBrains出品的一个Go语言IDE,JB的IDE有多好用我想很多程序员都知道,个人感觉唯一的缺点就是比较大(因为功能多) 希望大家多多支持正版 ...
- 用docker快速搭建wordpress博客
WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在Windows上可 ...
- Vue项目构建开发笔记(vue-lic3.0构建的)
1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...
- Android 组件化方案探索与思考
Android 组件化方案探索与思考 组件化项目,通过gradle脚本,实现module在编译期隔离,运行期按需加载,实现组件间解耦,高效单独调试. 本项目github地址 https://githu ...