图片上传浏览

最新推荐文章于 2022-01-16 19:40:58 发布

goddess_love_Angels

最新推荐文章于 2022-01-16 19:40:58 发布

阅读量397

点赞数

分类专栏： web 文章标签：图片上传-浏览

本文链接：https://blog.csdn.net/tanhoqi451/article/details/51546695

版权

web 专栏收录该内容

15 篇文章 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>