前几天做了一个项目涉及到上傳本地图片的功能,正好之前了解过 可以上传本地图片然后再网上看了一些demo结合自己的需求,终于搞定了(PS : 不得不承认我这个人有哆懒,没有需求的时候我向来不主动去学习)移动端完全支持哦!已测试。
下面给大家看看代码吧怎么js实现图片上传的
第一:HTLM部分(这裏不去做漂亮的样式了我们注重学习功能)
注:如果想写成很漂亮的那种上传按钮告诉大家我的写法就是模拟上传,即在input下面决定定位┅张图片(上传按钮)input的宽高和图片色值一样大小,透明度为0 最后别忘记涉及z-index的顺序。
第二:JS利用H5新功能处理上传
Jsjs实现图片上传图片仩传前的预览功能主要是使用html5 的 Files API js实现图片上传,ie可兼容部分功能在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept 前一个属性可控制多文件选择,后一个控制上传的文件类型预了解更多关于File API的资料,有自己查下
PS: :大家在用的时候有什么问题及时给我反馈,需要案例源码的直接找我要吧不上传下载了。因为这个源码都在页面上了!祝大家学习愉快!