`
gongmingwind
  • 浏览: 578181 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

本地上传预览图片

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

方法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;
           }
        }
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics