本地上传预览图片

要实现在本地选择图片后,即可进行预览功能,总体来说有两种方法:

[size=small][color=green][b]方法1、使用AJax上传组件,选择文件后自动通过AJax将文件上传到服务器中,然后返回图片在服务器的地址[/b][/color][/size]

好处:这种方法不存在浏览器的兼容问题
缺点:对服务器的压力比较大


方法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;
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值