![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
实现组件功能
文章平均质量分 85
wj_秦桑低绿枝
我从负无穷来,前往正无穷去。
展开
-
用原生js写图片上传组件v3.0(最终版本)
js图片上传组件:基本要求:1.上传的图片可预览,可删除,可被覆盖更新2.要求图片格式为jpg和png,大小不能超过2M3.模拟回显,可用本地存储(实际上的回显是通过后台传过来的url)4.写传给后台的方法5.解决浏览器的兼容性,主要解决读取文件功能和传给后台的兼容性新加需求:可拖拽图片进行操作上传图片的功能,暂不考虑兼容性(使用H5的drag api)h5 drag apidragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。(开始拖动)darg:事件主体是被拖放元素原创 2020-08-04 09:56:44 · 855 阅读 · 0 评论 -
用原生js写图片上传组件v2.0(还有新版本)
js图片上传组件:基本要求:1.上传的图片可预览,可删除,可被覆盖更新2.要求图片格式为jpg和png,大小不能超过2M新加需求:1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的url)2.写传给后台的方法3.解决浏览器的兼容性,主要解决读取文件功能和传给后台的兼容性整体感受就是:原理IE,珍爱生命。IE整体都不支持localstorage,但是IE10 11和谷歌和火狐都是一样的读取文件方式,IE9以下要考虑兼容的方法。所以在兼容方面,分了三种情况的兼容。传给后台的方法,因为I原创 2020-07-28 14:13:54 · 268 阅读 · 0 评论 -
用原生js写上传图片的组件v1.0(后续会完善)
用js实现上传图片的功能:要求:1.上传的图片可预览,可删除,可被覆盖更新2.要求图片格式为jpg和png,大小不能超过2M我真实实现的时候遇到一些问题,并进行了一些改进,如:< input type=“file”/>不能改样式,我就用我的样式去替换,点击我自己写的button,触发input的点击事件,再把input隐藏掉。加了一个浏览器不兼容FileReader 方法时的判断,并给出提示对于img里src为空时,会出现一个图片破了的小图标,在css样式中把它进行隐藏。解释原创 2020-07-20 11:31:27 · 779 阅读 · 0 评论