upload上传文件在image中显示 不同浏览器的兼容性问题(火狐、谷歌、IE、360)

很多人都或许在为浏览器的兼容性问题而头疼，尤其是上传图片显示问题，当然我这里所说的是不用其它任何辅助控件，就用VS里面提供的原始控件。下面这些代码希望对你们有所帮助

JS代码 

function showpic(file, img) {           

     var dFile = document.getElementById(file.id);          

     var dImg = document.getElementById(img);           

     var dInfo = document.getElementById('img');

            if (!dFile.value.match(/.jpg|.gif|.png|.bmp/i)) {             

            alert('图片类型必须是: .jpg, .gif, .bmp or .png !');         

            return;             }      

       var Sys = {};            

     var ua = navigator.userAgent.toLowerCase();           

     var s;           

    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :              

    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :              

    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :      

    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :          

    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

 

//判断浏览器

 if (Sys.ie) {//IE浏览器
                var url = dFile.value;
                if (url.indexOf('fakepath') == 3) {
                    alert("由于浏览器安全性问题，图片无法显示");//在IE10中将文件上载到服务器时包含本地目录为禁用时
                }

                var from = img.indexOf('g') + 1;
                var to = img.length;
                var pic = 'pic' + img.substring(from, to);
                var newPreview = document.getElementById(pic);
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dFile.value;
                dImg.style.display = 'none';
                newPreview.style.width = "250px";
                newPreview.style.height = "100px";

 }
            else if (Sys.firefox || Sys.chrome) {//火狐或者谷歌浏览器
                if (dFile.files) {
                    var accept = ["image/png", "image/jpeg", "image/jpg", "image/gif"];
                    if (accept.indexOf(dFile.files[0].type) > -1) {
                        var reader = new FileReader();
                        reader.readAsDataURL(dFile.files[0]);
                        //延迟一会等待文件读取完毕

                          var t = setTimeout(function () {
                            dImg.src = reader.result;
                            clearTimeout(t);
                        }, 100)
                    }
                }

      else {                  

           dImg.src = obj.value;         

            }

        }

 

 

相应控件：

 <input type="file" id="upload4" name="upload" runat="server" onchange="showpic(this,'img1');" />

<td style="width: 250px; float: none" id="pic1" class="img">
           <asp:Image ID="img1" runat="server" />
  </td>