这篇文章主要讲解了javascript如何实现移动端HTML5图片上传预览和压缩功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩。
在代码之前,有必要先了解我们即将使用到的几个API
file 和 FileList 对象file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象。
通常情况我们这样使用它:
// FileList 对象 var fs = document.getElementById("text").files console.log(fs) >>FileList 0:File lastModified:1487309111498 lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中国标准时间) name:"1.png" size:22177 type:"image/png" webkitRelativePath:""