JSP代码:
<s:file name="logo" id="logo" cssStyle="width:750px" οnchange="setImage(this)"/>
<div id="goodsImageDiv" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:700px;height:200px;">
<img id="goodsImage" style="width:180px;height:100%;display:none"/></div>
JS代码:
function setImage(obj){
var value = obj.value;
if(value ==""){
return false;
}
if(value.indexOf('.jpg')<=0 && value.indexOf('.JPG')<=0){
alert("请选择jpg类型图片");
obj.outerHTML += "";
return false;
}
var divObj = document.getElementById("goodsImageDiv");
var imageObj = document.getElementById("goodsImage");
return previewImage(divObj,imageObj,obj);
}
不同浏览器获得路径方式如下:
说明:(在IE9下,如果file控件获得焦点,则document.selection.createRange()拒绝访问,因此,只需要在fileImg.select()后面加一句fileImg.blur()即可。但是,如果当前页面被嵌在框架中,则fileImg.blur()之后,file控件中原本被选中的文本将会失去选中的状态,因此,不能使用fileImg.blur()。可以让当前页面上的其他元素,如div,button等获得焦点即可,如div_view.focus()。(必须在获得路径之前写)注意,如果是div,则要确保div有至少1像素的高和宽,方可获得焦点。)
function previewImage(divObj,imageObj,fileObj){ try{ //FireFox7.0下直接设置img属性 if(fileObj.files && fileObj.files[0]){ //另一种FF浏览器的判断: if (navigator.userAgent.indexOf("Firefox")>0) imageObj.style.display=""; imageObj.src = window.URL.createObjectURL(fileObj.files[0]); //7.0的获取方法;7.0以下的取法:obj.files.item(0).getAsDataURL(); }else if(divObj.filters){ //另一种IE浏览器的判断: if (navigator.userAgent.indexOf("MSIE")>0) fileObj.select(); var value; if ($.browser.version > 8) { divObj.focus(); // IE9 } value = document.selection.createRange().text; imageObj.style.display="none"; divObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src= value; } }catch(ex){ alert("选择企业LOGO图片路径错误!"); fileObj.outerHTML+=""; return false; } return true; }