图片预览

转载http://blog.csdn.net/yusimiao/article/details/12586179

function tempClick(){  

    /**  
     * 火狐浏览器实现点击图片出现文件上传界面  
     * var a=document.createEvent("MouseEvents");   
     * a.initEvent("click", true, true);    
     * document.getElementById("upload_main_img").dispatchEvent(a);   
     */  

    //IE浏览器实现点击图片出现文件上传界面  
    document.getElementById('fxls').click();            //调用main_img的onclick事件  
}  

/**  
 * 预览图片  
 * @param obj  
 * @returns {Boolean}  
 */  
function PreviewImg(obj) {  
    var newPreview = document.getElementById("img_2"); //获取网页中的元素
    var imgPath = getPath(obj); //得到图片的绝对路径
    if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){  //匹配jpg或gif或png或bmp   i不区分大小写
        alert("图片格式错误！");  
        return false;  
    }  
    newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";//该对象用于在IE下显示预览图片    ,scale  :　 缩放图片以适应对象的尺寸边界。 
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgPath;    //必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
}    

/**  
 * 得到图片绝对路径  
 * @param obj  
 * @returns  
 */  
function getPath(obj){   
    if(obj) {    
        if(navigator.userAgent.indexOf("MSIE")>0) {   //判断浏览器内核是否为IE内核 
            obj.select();     //选定对象
            obj.blur();         //获取焦点
            //IE下取得图片的本地路径     
            return document.selection.createRange().text; //运用IE滤镜获取数据;   
        } else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) {    
             if (obj.files) {  // Firefox下取得的是图片的数据     
                return files.item(0).getAsDataURL();  //返回选定程序路径;   
             }     
             return obj.value;     
         }    
         return obj.value;     
    }     
} 
<div align="left"><input type="file" class="MyFile" style="width:300px" id="fxls" name="fxls"  onchange="PreviewImg(this)">
                            <input type="hidden" id="fileName" name="fileName"></div>    
                            <div id="img_2" style="width:200px;height:100px; cursor:pointer; background-image: url('Chrysanthemum.jpg');" onclick="tempClick()"></div>