使用<input type=\'file\'>上传图片实现本地图片预览

原创 乘风逐月 随笔 文件上传 435阅读 2017-11-14 10:49:02 举报

1.修改原始<input type='file'>样式:
原始的<input type='file'>样式

使用<inputtype=\'file\'>上传图片实现本地图片预览
这个标签的样式不可以用css修改,想要美化它可以使用其他标签代替,隐藏原来的input标签。比如使用<label></label>标签,label标签的样式可以随意修改。label标签的for属性可以关联input标签的id,点击label标签时,可以触发input标签的点击事件。
2.获取选择的文件信息:
使用chang事件监听是否选择文件,若选择了文件,就可以获取<input type='file'>的files属性,files属性值为一个类数组对象,有length属性,里面的元素就是用户所选的文件列表。若用户选择了一个文件,则files[0]就是该文件。若input有multiple 属性,用户可以选择多个文件,则可以像循环数组一样取出里面的所有被选文件,可得到被选文件的名称,大小,类型,文件的最后修改时间等信息。
javascript 代码

3.使用FileReader对象,读取文件实现图片预览:
构造函数FileReader():返回一个新构造的FileReader对象,该对象包含的属性方法有:
属性:

使用<inputtype=\'file\'>上传图片实现本地图片预览
状态常量:

使用<inputtype=\'file\'>上传图片实现本地图片预览
方法:
abort() :中止该读取操作,readyState属性的值为DONE。
readAsArrayBuffer():读取File对象中的内容,读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则会调用。同时result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容
readAsDataURL():读取File对象中的内容, 读取操作完成时,readyState属性的值会成为DONE如果设置了onloadend事件处理程序,则会调用。同时result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容,预览本地图片就是使用此方法读取内容。
事件:
onabort:当读取操作被中止时调用
onerror:当读取操作发生错误时调用
onload:当读取操作成功完成时调用
onloadend:当读取操作完成时调用,不管是成功还是失败。该处理程序在onload或者onerror之后调用
onloadstart:当读取操作将要开始之前调用
onprogress:在读取数据过程中周期性调用

多图预览代码:
html 代码

可预览效果:

使用<inputtype=\'file\'>上传图片实现本地图片预览

评论 ( 2 )
最新评论
乘风逐月 1F 2017-11-16 17:25:08 2F

是的,之前也是一直用上传插件来的,但是这次有个需求用插件更麻烦,最后还是用了原生的。

杜塞尔多夫 2017-11-16 16:10:43 1F

<input type="file">在不同浏览器端显示都不是一样,可是样式都很丑,之前用css,透明度为0,上传点击区域用一个图片盖住,点击触发,后面随着项目进度进行,需求越来越多,比如批量上传,删除操作,上传进度实时显示等,发现原生上传功能完全满足不了需求,只好用插件来解决。