要实现在本地选择图片后,即可进行预览功能,总体来说有两种方法:
方法1、使用AJax上传组件,选择文件后自动通过AJax将文件上传到服务器中,然后返回图片在服务器的地址
好处:这种方法不存在浏览器的兼容问题
缺点:对服务器的压力比较大
方法2:在本地使用JS针对不同的浏览器进行操作
好处:速度快
缺点:要处理跨浏览器的问题
我重点说下方法2:
<img>元素:
<table style="border: 0px; width: 400px;">
<tr>
<td align="center">
<img id="disImage"
style="display: none; filter: progid : DXImageTransform . Microsoft . AlphaImageLoader(sizingMethod = scale);"
width="106" height="106"
src="${contextPath}/admin/commonlink/pic/blank.gif" />
</td>
</tr>
</table>
<file>元素:
<input type="file" onchange="handler()"/>
handler()函数:
var picPath = getPath(document.getElementById(picName));
if(this.getValue()==""){
document.getElementById("disImage").style.display="none";
}else{
document.getElementById('disImage').src = picPath;
document.getElementById("disImage").style.display="block";
}
获得文件路径的函数:针对不同的浏览器进行处理
function getPath(obj){
if(obj){
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}else if(window.navigator.userAgent.indexOf("Firefox")>=1){
//firefox
if(obj.files){
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
分享到:
相关推荐
图片上传本地预览插件
使用jquery上传前,预览图片,裁剪,示例使用php接收上传的文件,并且保存为裁剪后的图片。不需要上传后再裁剪图片,只需要本地裁剪好即可,裁剪的时候也可以旋转图片。
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...
在网上找到一个高手写本地图片上传预览的插件,测试通过ie6,ff2.0、3.6,做成个Demo拿来和大家分享,jsp实现
上传图片本地预览效果,选择图片就可在页面上看到
cupload本地图片上传预览插件
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
此工程下页面test.jsp为图片选中预览功能实现
Jquery 表单验证+本地图片上传-切割-预览 完全项目 希望不要用于商业用途
html5图片上传本地生成缩略图预览
html5移动端图片上传本地生成缩略图预览,单图上传
NULL 博文链接:https://jm1999.iteye.com/blog/1965816
实现jsp的本地图片上传及预览,有详细的实现代码。
上传图片本地预览,能本地看到上传的图片,方便直接的
写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...
利用HTML5的getObjectURL获取图片路径实现本地预览上传图片,类似于点击现有头像上传,更改图片为新头像那种。
Html5上传图片前生成本地预览,可以在本地预览图片,再上传到服务器
上传图片的project 博文链接:https://alisdame.iteye.com/blog/2163940
可以不上传到服务器在客户端预览用户上传的图片。支持所有主流浏览器
图片上传,html页面,本地预览,后台前台页面代码都有