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>
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>
JS代码

 

以上是关于type="file"实现兼容IE8本地选择图片预览的主要内容,如果未能解决你的问题,请参考以下文章

html写的type="file"的input怎么去掉默认提示

js 实现 input type="file" 文件上传示例代码

上传文件 隐藏input type="file",用其它标签实现

input type="file"多图片上传

强制 <input type="file"> 在移动设备中打开图库

jQuery动态添加<input type="file">