首页 > 代码库 > JavaScript实现简单的前端上传图片预览
JavaScript实现简单的前端上传图片预览
JavaScript实现简单的前端上传图片预览
<div class="file_upload"> <div id="portrait"></div> <input type="file" name="" id="" onchange="showPerview(this)"> </div> <script type="text/javascript"> function showPerview(source) { var file = source.files[0]; if (window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { document.getElementById(‘portrait‘).style.backgroundImage =‘url(‘+e.target.result+‘)‘; document.getElementById(‘portrait‘).style.backgroundSize = ‘cover‘; document.getElementById(‘portrait‘).style.backgroundRepeat = ‘no-repeat‘; }; fr.readAsDataURL(file); } } </script>
使用FileReader
对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File
对象或者Blob
对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input>
元素上选择文件后返回的FileList
对象,也可以来自拖放操作生成的 DataTransfer
对象,还可以是来自在一个HTMLCanvasElement
上执行mozGetAsFile()方法后的返回结果
.
readAsDataURL()
开始读取指定的Blob
对象或File
对象中的内容. 当读取操作完成时,readyState
属性的值会成为DONE
,如果设置了onloadend事件处理程序,则调用之
.同时,result
属性中将包含一个data:
URL格式的字符串以表示所读取文件的内容.
事件处理程序
onabort
- 当读取操作被中止时调用.
onerror
- 当读取操作发生错误时调用.
onload
- 当读取操作成功完成时调用.
onloadend
- 当读取操作完成时调用,不管是成功还是失败.该处理程序在
onload
或者onerror之后调用
. onloadstart
- 当读取操作将要开始之前调用.
onprogress
- 在读取数据过程中周期性调用.
JavaScript实现简单的前端上传图片预览
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。