前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

时间:2021-11-25 16:48:15

文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html

一、window.URL

前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

  • 在Chrome中,window.URL和window.webkitURL都存在
  • 在Firefox中,仅Window.URL存在
  • 在IE11(Edge),10中仅window.URL存在
  • 在IE7、8、9中不存在window.URL
  • 在IE中能通过FileObject 的value 属性获取文件全路径
  • 在Chrome中无法获取FileObject的全路径,得到的是一个假路径
  • 在Firefox中根本获取不到路径,得到的是一个文件名
  • 在IE7、8、9中无法获取到FileObject的files属性
  • 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
  • window.URL中的方法
  • 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

二、上传过程使用滤镜预览图片

一般在网页(JSP或HTML)中要显示图片,我们可以用src=xxxx的路径的方式去显示,但是在web应用中,这是无效的,因为src后跟的是文件路径,如果是单单一个页面是没问题,如果是项目工程中的话,就必须是在该项目下的路径,这样如果是上传的图片就显示不了。因此我们可以用src后跟流的方式显示图片,或者使用滤镜

前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)