图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。
但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。
不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现。
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。
但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。
在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
兼容:ie6/7/8, firefox 3.5.5
后台支持下还兼容:opera 10.10, safari 4.0.4, chrome 3.0
程序说明
【基本原理】
图片预览主要包括两个部分:从file表单控件获取图像数据,根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的,而img还必须是img元素。
程序有以下几种预览方式:
simple模式:直接从file的value获取图片路径来显示预览,适用于ie6;
filter模式:通过selection获取file的图片路径,再用滤镜来显示预览,适用于ie7/8;
domfile模式:调用file的getAsDataURL方法获取Data URI数据来显示预览,适用于ff3;
remote模式:最后的办法,把file提交后台处理后返回图片数据来显示预览,全适用。
转:http://www.aspxcs.net/HTML/1259371054.html
分享到:
相关推荐
js图片上传预览(兼容所有主流浏览器),对现有的HTML5浏览器也做了处理
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器。 第一种使用uploadify异步上传,上传后返回图片路径显示到页面。 每二种使用ajaxSubmit异步上传,为兼容IE8,dataType使用text...
js预览图片兼容ie6,7,8,火狐等浏览器
在js中实现选择图片并实时预览改图片,因为浏览器的安全性无法得到图片的路径,所以传统的方法无法实现。
卖5分,亲自测试通过哦,亲。
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器。 第一种使用uploadify异步上传,上传后返回图片路径显示到页面。 每二种使用ajaxSubmit异步上传,为兼容IE8,dataType使用text...
上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
1. 解压 PDF前端预览功能.zip 压缩包,复制到网站开发目录; 2. 调用方式:window.open("Scripts/lib/PDF/web/viewer.html?file=" + window.location.protocol + "//" + window.location.host + "/test.pdf"); 3....
在网上找了好久都没有一个好的图片上传组建,于是我自己弄了一个, 功能非常 强大。而且最终要的是 能够显示缩略图,一次上传多张,生成缩略图,按比例缩放。添加水印都有。而且能够兼容时下的各种浏览器。 Jquery
很多网站都在为提升用户体验而努力,想尽多种办法让用户在网站上的操作更加舒适、人性化,就像这个图片预览小功能一样,不要说它很小,但是它发挥的作用很明显,在上传前预览一下图片,以免选择了错误的文件,上次写...
网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8...
js开发的兼容ie,ff的图片上传预览小程序,在后台支持下(asp.net)还兼容其他浏览器
里面有好几个实例 实现图片上传及时预览功能,兼容各种浏览器及版本
该代码能够实现图片上传预览效果,并且能够跨多个浏览器。兼容性好......
JS选择图片预览功能 兼容IE火狐CHROME等主流浏览器
pdf.js是社区驱动和Mozilla Labs的支持。我们的目标是创建一个通用的,基于标准的网络平台解析和渲染PDF,并最终释放出的PDF阅读器的扩展。 示例地址: http://mozilla.github.com/pdf.js/web/viewer.html
pdf.js插件,支持ie浏览器等,是一款特别好用的浏览pdf插件的工具,强烈推荐,不用再去考虑不兼容ie浏览器问题
jquery+html5实现图片上传并裁切功能,上传图片前可预览裁切效果,显示裁切框,应用jquery.Jcrop.min.js实现,兼容性方面,适用浏览器:FireFox、Chrome、Opera. 不支持IE8、360、Safari、傲游、搜狗、世界之窗。本...