<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>get file input full path</title> <script type="text/javascript"> function PreviewImage(obj, imgPreviewId, divPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.png"; //,允许上传文件的后缀名 var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase(); var browserVersion = window.navigator.userAgent.toUpperCase(); if (allowExtention.indexOf(extention) > -1) { if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6 document.getElementById(imgPreviewId).setAttribute("src", obj.value); } else {//ie[7-8]、ie9 obj.select(); var newPreview = document.getElementById(divPreviewId + "New"); if (newPreview == null) { newPreview = document.createElement("div"); newPreview.setAttribute("id", divPreviewId + "New"); newPreview.style.width = 160; newPreview.style.height = 170; newPreview.style.border = "solid 1px #d2e2e2"; } newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; var tempDivPreview = document.getElementById(divPreviewId); tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview); tempDivPreview.style.display = "none"; } } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) {//firefox7以下版本 document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL()); } else {//firefox7.0+ document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0])); } } else if (obj.files) { //兼容chrome、火狐等,HTML5获取路径 if ( typeof FileReader !== "undefined") { var reader = new FileReader(); reader.onload = function(e) { document.getElementById(imgPreviewId).setAttribute("src", e.target.result); } reader.readAsDataURL(obj.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("暂时不支持Safari浏览器!"); } } else { document.getElementById(divPreviewId).setAttribute("src", obj.value); } } else { alert("仅支持" + allowSuffix + "为后缀名的文件!"); obj.value = ""; //清空选中文件 if (browserVersion.indexOf("MSIE") > -1) { obj.select(); document.selection.clear(); } obj.outerHTML = obj.outerHTML; } } </script> </head> <body> <form name="form5" id="form5"> <input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')"/> <div id="divNewPreview" style="width: 158px;height: 158px;"> <img id="imgView" style="width: 158px;height: 158px;" src="" alt="" /> </div> </form> </body></html>
IE浏览器需要启用“将文件上载到服务器时包含本地目录路径” 如下图:
相关推荐
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8,而且chrome 火狐最新版本也有问题,自己动手丰衣足食。分享给给大家。
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。...例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。(转载自用)
Jsp图片预览程序(含Java源码) 目前,很多网站都在为提升用户体验而努力,想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。 上次...
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
jquery图片上传预览插件,通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1,未经过其它jquery版本测试。 使用时,您可以根据需要,随意修改! --------------------------------- =====更新...
主要解决无法再高版本上播放海康视频,测试可以播放
纯javascript实现上传图片前图片预览,判断图片大小,兼容ie-7到10 firefox chrome,非常不错,分享给大家。
jquery图片上传预览插件,通过 IE6、7、8、9 , chrome, firefox测试,测试时采用的是jquery1.7.1,未经过其它jquery版本测试。 使用时,您可以根据需要,随意修改!
js (html5 + html4) 文件上传管理器,支持上传进度显示,支持秒传+分片上传+断点续传,支持图片预览+缩放,支持 IE6+、Firefox、Chrome等。 特点: 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,...
这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上需求很小,没有研究。 总结一下就是: IE6下可以直接从file的value获取图片路径来显示预览。 IE7和IE8下通过select...
jquery+html5实现图片上传并裁切功能,上传图片前可预览裁切效果,显示裁切框,应用jquery.Jcrop.min.js实现,兼容性方面,适用浏览器:FireFox、Chrome、Opera. 不支持IE8、360、Safari、傲游、搜狗、世界之窗。本...
上传图片前,预览图片,支持chrome,firefox, ie 8,9,10,11 测试可以正常预览!
1. 解压 PDF前端预览功能.zip 压缩包,复制到网站开发目录; 2. 调用方式:window.open("Scripts/lib/PDF/web/viewer.... 3. 能支持多种浏览,火狐、IE、谷歌、360等,能支持本地文件直接浏览。
web-uploaderjs (html5 + html4) 文件上传管理器,支持上传进度显示,支持秒传+分片上传+断点续传,支持图片预览+缩放,支持 IE6+、Firefox、Chrome等。特点:轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅...
测试浏览器:firefox6,firefox12,chrome 25.0.1364.172 m,IE6-IE10 都兼容 safari5.0.4不支持FileReader和file.files.item(0).getAsDataURL方法,暂时无解,需要上传到服务器后返回临时文件名用img标签加载,不...
功能介绍: 1.上传并预览,用户可以任意选择区域,支持头像旋转 2.支持上传成功,js 回调函数 3.无论图片过大还是过小,都可以按照...兼容性好,任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用