图片上传浏览

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

兼容各个浏览器的图片上传预览

在Web开发中不可避免的会做一些图片上传的功能,传统的图片上传是将图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览,很明显的在这个过程中两次We...
  • hsany330
  • hsany330
  • 2016年07月14日 17:05
  • 2989

兼容微信浏览器的本地图片上传预览

随着移动设备的普及,越来越多的应用需要适应移动端来构建,包括相应的前端页面。在进行web前端页面开发的过程中,免不了会使用图片上传并在上传前预览的功能,有前辈已经给出了多浏览器兼容的图片上传代码,我们...
  • hjb2722404
  • hjb2722404
  • 2015年04月07日 13:52
  • 2249

Ueditor图片上传不能兼容微信浏览器的解决方案

大概思路是这样的,既然百度的上传功能不能用了,那就自己写一个吧,把工具栏中的上传图标改成我们自己的Input控件,使用Plupload.js把图片弄成文件流的形式传到后台处理页面,在后台处理页面里面把...
  • u014336163
  • u014336163
  • 2016年06月14日 17:08
  • 4675

基于C#+ASP.NET实现的图片上传并进行列表浏览的ImageDisplayer控件例子代码

  • 2008年11月21日 17:02
  • 151KB
  • 下载

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

Html代码: div> asp:FileUpload ID="fuImage" runat="server" /> div> div> asp:Button ID="btnUpl...
  • limumu100
  • limumu100
  • 2014年06月11日 11:31
  • 394

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

form表单图片上传的HTML代码 确定 取消 ...
  • u012891737
  • u012891737
  • 2016年10月31日 11:08
  • 1102

Asp.net MVC3 文本编辑器KindEditor使用及图片上传浏览

先将下载的KindEditor放到项目中 View页面         Index     @Scripts.Render("~/bundles/kindeditor")...
  • CsethCRM
  • CsethCRM
  • 2015年02月05日 13:08
  • 2090

js 图片上传前浏览

Document function pic(upload){ var file = document.getElementById("up1"); var brow...
  • wangjun5132
  • wangjun5132
  • 2015年05月30日 17:09
  • 237

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

设计思路:用一个值对象封装一个photo信息。photo值对象包括 private String id;// uuid private String realName;// 相片真实文件...
  • new___Smile
  • new___Smile
  • 2016年07月24日 14:35
  • 971

ajax图片上传插件

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

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