type="file"实现兼容IE8本地选择图片预览
Posted 凌乱忘语
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了type="file"实现兼容IE8本地选择图片预览相关的知识，希望对你有一定的参考价值。
一、html代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImagePage.aspx.cs" Inherits="Webs.pages.BookingNote.UploadImagePage" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <meta http-equiv="X-UA-Compatible" content="IE=10"/> 9 <title>上传图片</title> 10 <script src="/content/common/js/isLogin.js?verson=<%=VersionNo %>" type="text/javascript"></script> 11 <link rel="stylesheet" type="text/css" href="/content/common/css/app.v2.css?verson=<%=VersionNo %>"> 12 <link rel="stylesheet" type="text/css" href="/content/common/css/info.css?verson=<%=VersionNo %>"> 13 <!--[if lt IE 9]> <script src="/content/common/js/ie/html5shiv.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/respond.min.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/excanvas.js?verson=<%=VersionNo %>" cache="false"></script> <![endif]--> 14 <style type="text/css"> 15 .file-upload { 16 position: absolute; 17 left: 0; 18 top: 0; 19 width: 100%; 20 height: 100%; 21 z-index: 999; 22 opacity: 0; 23 filter: alpha(opacity=0); 24 } 25 26 .previewBox { 27 margin: 15px 0; 28 } 29 30 .previewBox img { 31 margin-right: 10px; 32 } 33 34 .uploadBtn { 35 border: 1px solid #eee; 36 background: #fff; 37 color: #666; 38 font-size: 16px; 39 line-height: 1.6; 40 padding: 6px 6px; 41 } 42 </style> 43 <%=headAppendHtmlJavaScript() %> 44 </head> 45 <body> 46 <div style="width: 100%; height: auto; margin: auto"> 47 <%--查询div--%> 48 <div id="show_fir" style="position: center;"> 49 <p style="margin: 0px !important"> 50 <span style="font-size: 18px; font-weight: bold;">图片类型</span> 51 <select name="SearchImageType" id="SearchImageType" class="form-control m-b" style="margin-left: 10px; display: inline-block; width: 75px;"> 52 <option value="0">全部</option> 53 <option value="1">回执</option> 54 <option value="2">破损</option> 55 <option value="3">其他</option> 56 </select> 57 <input type="button" class="btn btn-s-md btn-success" value="查询" onclick="searchPhoto();" style="margin-left: 10px; vertical-align: top;" /> 58 <input type="button" id="rovordUpload" class="btn btn-s-md btn-success" value="拍摄上传图片" onclick="shootingUpload();"style="float: right; margin-right: 30px;" /> 59 <input type="button" class="btn btn-s-md btn-success" value="上传本地图片" onclick="showUpload();" style="float: right; margin-right: 30px;" /> 60 61 </p> 62 63 64 <hr style="background-color: lightgray; height: 2px; border: none; margin: 0px !important" /> 65 <div class="xuanfucontent"> 66 <ul id="ulli"> 67 </ul> 68 </div> 69 </div> 70 <%--普通上传---%> 71 <div id="show_sed" style="display: none"> 72 <div> 73 <div style="width: 5%; height: 200px; display: inline-block; float: left; position: relative"> 74 <div style="position: absolute; top: 5px; left: 0;"> 75 <img style="width: 40px; height: 40px;" src="/content/common/images/xh1.png" /> 76 </div> 77 <div style="position: absolute; top: 80px; left: 0;"> 78 <img style="width: 40px; height: 40px;" src="/content/common/images/xh2.png" /> 79 </div> 80 <div style="position: absolute; top: 145px; left: 0;"> 81 <img style="width: 40px; height: 40px;" src="/content/common/images/xh3.png" /> 82 </div> 83 </div> 84 <div style="width: 25%; display: inline-block; border-right: 2px solid #e6e6e6;"> 85 <div id="zhuangshi"></div> 86 <p style="font-size: 14px; font-weight: bold;"> 87 <p style="color: #646464; font-weight: bold;">选择图片类型：</p> 88 <select name="dropImgType" id="dropImgType" class="form-control m-b" style="width: 260px;"> 89 <option value="0">请选择</option> 90 <option value="1">回 执</option> 91 <option value="2">破 损</option> 92 <option value="3">其 他</option> 93 </select> 94 </p> 95 <%--普通上传--div--%> 96 <div class="file-box" id="jiazaidiv"> 97 <p style="width: 243px; color: #646464; font-weight: bold;">选择图片文件：</p> 98 <div> 99 <input type="text" class="form-control" readonly="readonly" id="fileInput" name="fileInput" style="width:190px; padding-left:5px; float: left;" /> 100 <div style="position: relative; display: inline-block; margin-left: 5px;"> 101 <input type="button" class="btn btn-s-md btn-success" value="浏览图片" /> 102 <input type="file" class="file-upload" name="file-upload" id="file-upload" /> 103 </div> 104 </div> 105 </div> 106 <%--公共按钮事件--%> 107 <div style="margin-top: 15px;"> 108 <input type="hidden" value="" id="pathimg" name="pathimg" /> 109 <input type="hidden" value="" id="fileSize" name="fileSize" /> 110 <input type="button" id="uploadBtn" class="btn btn-s-md btn-success" value="上传" /> 111 <input type="button" class="btn btn-s-md btn-success" onclick="closeSed()" value="返回" /> 112 </div> 113 </div> 114 <div id="photo" style="display: inline-block; width: 600px; height: 400px; position: absolute; top: -20px; left: 33%;"> 115 <div class="previewBox" style="width: 100%; height: 100%;"></div> 116 </div> 117 </div> 118 </div> 119 </div> 120 <script src="/content/common/js/ajaxRequest.js?verson=<%=VersionNo %>" type="text/javascript"></script> 121 <script src="/content/common/js/pages.js?verson=<%=VersionNo %>" type="text/javascript"></script> 122 <script src="/content/common/js/cookie.js?verson=<%=VersionNo %>" type="text/javascript"></script> 123 <script src="/content/common/js/Storage.js?verson=<%=VersionNo %>" type="text/javascript"></script> 124 <script src="/content/common/js/upload/jfu/vendor/jquery.ui.widget.js"></script> 125 <script src="/content/common/js/upload/jfu/jquery.iframe-transport.js"></script> 126 <script src="/content/common/js/upload/jfu/jquery.fileupload.js"></script> 127 <%=bodyAppendHtmlJavaScript() %> 128 </body> 129 </html>
二、JS代码
1 <script type="text/javascript"> 2 var bookNoteId, imageName, imageSize; 3 var jsonObject = {}; 4 $(function () { 5 $("#show_sed").css("display", "none"); 6 $("#show_fir").css("display", "block"); 7 $("#uploadBtn").attr("disabled", true); 8 $("#file-upload").attr("accept", "image/gif,image/jpeg,image/jpg,image/x-png,image/x-ms-bmp,"); 9 $(".previewBox").html("<img src=‘../../content/common/layer-v3.0.3/layer/skin/default/u825_03.jpg‘ width=‘200‘ height=‘200‘"); 10 bookNoteId = getUrlParam(location.search, "bookNoteId"); 11 searchPhoto(); 12 //浏览图片事件绑定 13 bindEvent(); 14 if (typeof window.external.ShowPointEasyToBeatForm == ‘undefined‘) { 15 $("#rovordUpload").css("display", "none"); 16 } 17 }); 18 //浏览图片事件绑定 19 function bindEvent() { 20 $(".previewBox").off(".choose,.upload"); 21 } 22 //查询事件 23 function searchPhoto() { 24 jsonObject.bookNoteId = bookNoteId; 25 jsonObject.iamgeType = $("#SearchImageType").val(); 26 jsonPost("/wsService/BookNoteImage/UploadImageHandler.ashx?type=QueryImageAway", jsonObject, 27 function (response) { 28 if (response.code == 0) { 29 document.getElementById("ulli").innerHTML = response.data == "" ? "暂无数据" : response.data; 30 } else { 31 alert(response.message); 32 document.getElementById("ulli").innerHTML = "暂无数据"; 33 } 34 }, 35 function () { } 36 ); 37 } 38 //展示上传图片模块 39 function showUpload() { 40 $("#show_sed").css("display", "block"); 41 $("#show_fir").css("display", "none"); 42 $("#jiazaidiv").show(); 43 $("#hs_Upload").hide(); 44 } 45 //关闭上传图片模块 46 function closeSed() { 47 $("#show_sed").css("display", "none"); 48 $("#show_fir").css("display", "block"); 49 searchPhoto(); 50 } 51 //上传 52 $("#file-upload").fileupload({ 53 url: "/wsService/BookNoteImage/UploadImageHandler.ashx?type=UploadAliYun", 54 dataType: ‘json‘, 55 fileInput: $("#file-upload"), 56 add: function (e, data) { 57 var file = data.files[0]; 58 $("#fileInput").val(data.fileInput[0].value); 59 $("#uploadBtn").attr("disabled", false); 60 imageSize = file.size; 61 imageName = file.name; 62 operationImg(data.fileInput[0]); 63 $("#uploadBtn").unbind().bind(‘click‘, function () { 64 if ($("#dropImgType").val() == 0) { 65 showErrorAlert("请选择上传照片类型！"); 66 return; 67 } 68 else if ($("#fileInput").val() === "") { 69 showErrorAlert("请选择图片！");; 70 return; 71 } 72 else if (!/.png$|.bmp$|.jpg$|.jpeg$|.gif$/.test(file.name)) { 73 showErrorAlert(‘请上传以png/bmp/jpg/jpeg/gif为扩展名的图片文件‘); 74 return; 75 } 76 else if (file.size >= 10485760) {//上传文件大小不能超过10Mb 77 showErrorAlert(‘上传的文件大小不能超过10Mb‘); 78 return; 79 } 80 81 //showLoading(); 82 $("#file-upload").fileupload({ 83 formData: { 84 name: $("#fileInput").val() 85 } 86 }); 87 console.log(‘before submit:‘ + $("#fileInput").val()); 88 data.submit(); 89 console.log("after submit"); 90 }); 91 }, 92 done: function (e, rep) { 93 console.log("done"); 94 var response = rep.result; 95 //var response = JSON.parse(rep.result);//后端返回字符串，解析成JSON对象，请求的content-type应该为text/plain,避免IE9下返回application/json提示下载，从而兼容IE9 96 //hideLoading(); 97 $("#fileInput").val(‘‘); 98 if (response.code == 0) { 99 $("#pathimg").val(response.data); 100 saveDb(); 101 } else { 102 showSuccessAlert("上传失败:" + response.message); 103 } 104 }, 105 fail: function () { 106 console.log("fail");//没有打印，也就是说没回调fail 107 //hideLoading(); 108 $("#fileInput").val(‘‘); 109 } 110 }); 111 112 //删除单图事件 113 function delPhoto(imageId) { 114 if (confirm("是否删除此图片？")) { 115 jsonObject.deleteId = imageId; 116 jsonPost("/wsService/BookNoteImage/UploadImageHandler.ashx?type=DeleteImg", jsonObject, 117 function (response) { 118 if (response.code == "0") { 119 showSuccessAlert("删除图片成功！"); 120 searchPhoto(); 121 } else { 122 showErrorAlert("删除图片失败！"); 123 } 124 }, 125 function () { } 126 ); 127 } 128 } 129 //查看原图 130 function lookPhoto(imageUrl) { 131 var option = { 132 id: ‘test_dialog3‘, 133 html: "<div style=‘width:100%;height:100%;text-align:center‘><image style=‘width:100%;height:100%;‘ src=http://" + imageUrl + "></image><div>", 134 title: ‘原图‘ 135 }; 136 showDialog(option); 137 } 138 //图片入库 139 function saveDb() { 140 //开始上传 141 jsonObject.bookNoteCode = bookNoteId; 142 jsonObject.imgtype = $("#dropImgType").val(); 143 jsonObject.fileSize = imageSize; 144 jsonObject.fileUrl = $("#pathimg").val(); 145 jsonObject.FileName = imageName; 146 jsonPost("/wsService/BookNoteImage/UploadImageHandler.ashx?type=UpLoadImg", jsonObject, 147 function (response) { 148 if (response.code == "0") { 149 showSuccessAlert("上传图片成功！"); 150 $("#fileInput").val(""); 151 $("#pathimg").val(""); 152 } else { 153 showErrorAlert("上传图片失败！"); 154 $("#pathimg").val(""); 155 $("#fileInput").val(""); 156 } 157 }, 158 function () { } 159 ); 160 } 161 </script> 162 <script type="text/javascript"> 163 //检查图片格式 164 function isImg(url) { 165 var result = /.+\.(jpg|png|jpeg|gif)$/.test(url); 166 if (!result) { 167 showErrorAlert("您选择的图片格式有误，请重新选择"); 168 return false; 169 } else { 170 return true; 171 } 172 }; 173 //添加预览图片到页面上 174 function addImgHtml(url) { 175 if ($(".previewBox")) { 176 $(".previewBox").html("<img src=" + url + " width=‘95%‘ height=‘95%‘ >"); 177 } 178 }; 179 //兼容IE处理 180 function previewImgIE(url) { 181 if (isImg(url)) { 182 var imgWrap = "<div class=‘imgWrap‘></div>"; 183 $(".previewBox").html($(imgWrap)); 184 $(".imgWrap").css({ 185 "width": ‘95%‘, 186 "height": ‘95%‘, 187 "display": "inline-block", 188 "margin-right": "10px", 189 "*display": "inline", 190 "*zoom": 1 191 }); 192 $(".imgWrap:last").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src=\"" + url + "\")"); 193 } 194 }; 195 //正常处理 196 function previewImg(files) { 197 var file = files[0]; 198 if (isImg(file.name)) { 199 var reader = new FileReader(); 200 reader.onload = function (evt) { 201 addImgHtml(evt.target.result); 202 }; 203 reader.readAsDataURL(file); 204 } else { 205 alert("您输入的图片格式有误，请重新输入!"); 206 return false; 207 } 208 return true; 209 } 210 211 //浏览图片操作； 212 function operationImg(fileInput) { 213 var isIE9OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent); 214 isIE9OrEarlier = isIE9OrEarlier && +isIE9OrEarlier[1] <= 9; 215 if (isIE9OrEarlier) { 216 //兼容IE 217 previewImgIE(fileInput.value); 218 } else { 219 //html5 files API 220 previewImg(fileInput.files); 221 } 222 }; 223 </script> 224 </script>
以上是关于type="file"实现兼容IE8本地选择图片预览的主要内容，如果未能解决你的问题，请参考以下文章
html写的type="file"的input怎么去掉默认提示
js 实现 input type="file" 文件上传示例代码
上传文件 隐藏input type="file",用其它标签实现