通过 html5 FileReader 实现上传图片预览功能

为什么80%的码农都做不了架构师？>>>

Html 部分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="file" name="file" onchange="showPreview(this)" /><img id="portrait" src="" width="70" height="75"></body></html>

JS部分

<script type="text/javascript">function showPreview(source) {var file = source.files[0];if (window.FileReader) {var fr = new FileReader();fr.onloadend = function(e) {document.getElementById("portrait").src = e.target.result;};fr.readAsDataURL(file);}}
</script>

转载于:https://my.oschina.net/furw/blog/493920

通过 html5 FileReader 实现上传图片预览功能相关推荐

java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
html元素拖拽预览图,HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blo ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
HTML5 上传图片预览
html5出现之前如果需要上传图片预览一般都是先上传到服务器然后远程预览 html5出现之后有个filereader 解决了这问题 //选中图片之后$("#fileAddPic&qu ...
html5上传使用FileReader,Promise图片预览
通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上 ...
java批量上传图片_JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 pageEncoding="UTF-8"%> 新增照片 var ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

通过 html5 FileReader 实现上传图片预览功能

通过 html5 FileReader 实现上传图片预览功能相关推荐

最新文章

热门文章