图片上传浏览

原创 2016年05月31日 16:14:52

完整的图片上传浏览:

<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,再考虑滤镜。

相关文章推荐

js 图片上传前浏览

Document function pic(upload){ var file = document.getElementById("up1"); var brow...

图片上传,js控制后缀名,大小及在线浏览

form表单图片上传的HTML代码 确定 取消 ...

.Net实现图片上传,浏览,删除

Html代码: div> asp:FileUpload ID="fuImage" runat="server" /> div> div> asp:Button ID="btnUpl...

javaEE:day8-在线图片上传与浏览(带图片点击放大、下载、删除、目录打散)

设计思路:用一个值对象封装一个photo信息。photo值对象包括 private String id;// uuid private String realName;// 相片真实文件...

多图片上传

  • 2017年11月15日 21:37
  • 670KB
  • 下载

阿里云服务器 云对象存储OOS(二) ---图片上传与读取demo

上一篇讲解了无需代码操作的阿里OOS云对象存储 http://blog.csdn.net/u014520797/article/details/53945912 1、SDK下载,不...

图片上传demo 后台代码

  • 2017年11月09日 17:42
  • 10.09MB
  • 下载

java批量图片上传

  • 2016年08月23日 08:44
  • 8.84MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片上传浏览
举报原因:
原因补充:

(最多只允许输入30个字)