关闭

图片上传浏览

标签: 图片上传-浏览
123人阅读 评论(0) 收藏 举报
分类:

完整的图片上传浏览:

<body>
<input type="hidden" name="hosp.image_id" id="image_id"/>
<div id="hosp_image" style="width: 100px; height: 100px" ></div>
<input type="file" name="file" id="upload_image" onchange="uploadImg(this)" />
<a href="javascript:orgClearImg()">删除</a>   
</body>
<script type="text/javascript">

function uploadImg(imgFile){
   var url; 
   if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
    if (imgFile.files && imgFile.files[0]) { // ie下用h5的FileReader
        var reader = new FileReader();  
         reader.onload = function(evt){  
             showThumb(evt.target.result);
        }    
            reader.readAsDataURL(imgFile.files[0]);  
    }else{//如果不支持就用滤镜
        var imgDiv = document.getElementById("hosp_image");
        imgDiv.innerHTML = "";
        imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
         imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
      }
    } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
        url = window.URL.createObjectURL(document.getElementById('upload_image').files.item(0)); 
            showThumb(url);
            imageSrcUrl = url;
    } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
            url = window.URL.createObjectURL(document.getElementById('upload_image').files.item(0)); 
            showThumb(url);
            imageSrcUrl = url;
        }
    } 
    //显示图片
    function showThumb(url){
        var str = '<img width="100" height="100" onclick="showSrcImg()" alt="" src="'+url+'" />';
        document.getElementById('hosp_image').innerHTML = str;
    }
    //放大显示图片
    function showSrcImg(){
        var str = '<img alt="" src="'+imageSrcUrl+'" />';
        document.getElementById('div_src_image').innerHTML = str;
        $('#imageSrcDialog').dialog('open');
    }
    //清空图片
    function orgClearImg(){
        $('#upload_image').val('');
        $('#hosp_image').html('');
        $('#image_id').val('');
        //ie
        var imgDiv = document.getElementById("hosp_image");
        imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = false)";
        var obj = document.getElementById('upload_image') ;
        obj.outerHTML=obj.outerHTML; 
    }   
</script>

在ie10 和ie8 下,有时会报filters不能用。所以考虑先用h5的filterReader,再考虑滤镜。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16885次
    • 积分:520
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:25篇
    • 译文:0篇
    • 评论:2条
    最新评论