要实现在本地选择图片后,即可进行预览功能,总体来说有两种方法:
[size=small][color=green][b]方法1、使用AJax上传组件,选择文件后自动通过AJax将文件上传到服务器中,然后返回图片在服务器的地址[/b][/color][/size]
好处:这种方法不存在浏览器的兼容问题
缺点:对服务器的压力比较大
方法2:在本地使用JS针对不同的浏览器进行操作
好处:速度快
缺点:要处理跨浏览器的问题
我重点说下方法2:
<img>元素:
<file>元素:
handler()函数:
获得文件路径的函数:针对不同的浏览器进行处理
[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;
}
}