file图片上传之前先预览
链接:https://www.cnblogs.com/tandaxia/p/5125275.html
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能。当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能。
今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上。
1、闲话少说,测试一下,图片上传前预览(选择图片):
实现代码:
![](/assets/blank.gif)
<div style="border:2px dashed red;"><p>图片上传前预览:<input type="file" id="xdaTanFileImg" οnchange="xmTanUploadImg(this)" accept="image/*"/><input type="button" value="隐藏图片" οnclick="document.getElementById('xmTanImg').style.display = 'none';"/><input type="button" value="显示图片" οnclick="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 单位为bytevar 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>
![](/assets/blank.gif)
------------------------------- end -----------------------------
2、另外 FileReader除了有函数readAsDataURL,另外还有另外两个函数readAsBinaryString 和 readAsText,分别可以将选择的文件读取成二进制和文本格式
测试一下,选择文本(txt、cs、html、js、css、xml),读取成二进制或者文本:
实现代码:
![](/assets/blank.gif)
<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" οnchange="xmTanUploadFile(this)"/><input type="button" value="读取成二进制数据" οnclick="readAsBinaryString()" /><input type="button" value="读取成文本数据" οnclick="readAsText()" /><input type="button" value="隐藏读取内容" οnclick="document.getElementById('xmTanContentDiv').style.display = 'none';"/><input type="button" value="显示读取内容" οnclick="document.getElementById('xmTanContentDiv').style.display = 'block';"/><div id="xmTanContentDiv"></div></div>
![](/assets/blank.gif)
---------------------------
3、----------- a标签之download属性 -------------
设置a标签href为图片链接,再设置download属性,点此链接可以直接下载图片
点此下载
实现代码:
![](/assets/blank.gif)
<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/picture.png";document.getElementById("xmTanShowImg").setAttribute("src", imgData); //给图片标签设置srcdocument.getElementById("xmTanDownload").setAttribute("href", imgData); //给a标签设置href</script>
![](/assets/blank.gif)
原文链接:http://www.cnblogs.com/tandaxia/p/5125275.html
转载于:https://www.cnblogs.com/wanlibingfeng/p/9232400.html
file图片上传之前先预览相关推荐
- JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览 图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
- iOS学习:调用相机,选择图片上传,带预览功能
iOS学习:调用相机,选择图片上传,带预览功能 发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏 赞3 8月22日珠海 OSC ...
- 在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
- java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- jquery插件:图片上传按比例预览
js部分是这样的: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:id ...
- 图片上传并且支持预览
首先这里先讲一个比较low的 <input type="file" id="file1" οnchange="preview1()"/ ...
- Java写file文件上传,在线预览思路
需要考虑的 1.存储路径区根据时间进行区分,例如根据年月份存放不同的文件目录/20220303 2.上传的文件为避免文件名相同,文件名存数据库,存储存放的文件名为UUID+后缀(如果不需要在线预览,则 ...
- 2016/4/19 ①单个文件上传 ②上传图片后 预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
- vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件 效果如图 直接看代码吧 template部分 <div class="file-upload&q ...
- html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
最新文章
- 每日一皮:年轻时的你,是不是也各种重构欲望?
- windows下安装docker
- 10 个冷门但又非常实用的 Docker 使用技巧
- Python里面对于嵌套列表的查询
- 穿越火线全部服务器都显示爆满,穿越火线大区全部爆满,频道挤不进去背后的故事!...
- win7 IIS7环境下部署PHP 7.0
- python剑指offer替换空格_《剑指offer》2-替换空格【Java+Python】
- SpykeTorch: Efficient Simulation of Convolutional Spiking Neural Networks With at Most One Spike per
- 第四步_安装gcc交叉编译工具
- 机器学习sklearn中决策树模型参数释义
- mysql主从架构的实现
- Electron构建魔兽世界插件更新安装
- 复习笔记1-java基础
- 【ESP 保姆级教程】 疯狂传感器篇 —— 案例:ESP8266 + MQ3酒精传感器 + webserver(局域网内曲线变化图)+ 自定义微信告警
- 关于travis scott的网名_文案| 关于【太阳】的惊艳句子
- 统计数字问题Python
- Android面试题集锦
- php与java语法的区别
- 2022年特色小镇行业研究报告
- DRF学习之短信验证的实现用户注册(十二)