上传文件ie7

Posted 刘奇云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上传文件ie7相关的知识,希望对你有一定的参考价值。

https://www.cnblogs.com/front-end-develop/p/6214818.html

第一步:html中引入jQuery-1.7.1.js和ajaxFileUpload.js

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>企业年金数据校验平台</title>
 5     <link href="css/index.css" rel="stylesheet" type="text/css" />
 6 </head>
 7 <body>
 8     <div class="container">
 9         <div class="head">
10             <div class="user-nav">
11                 <div class="user-info">
12                     <span id="username"></span><span class="logout can-click">退出</span>
13                 </div>
14             </div>
15             <div class="nav-title">
16                 <span>企业年金数据校验平台</span>
17             </div>
18 <!--            <div class="nav-attention">
19                 <img alt="light" src="images/atten_light.gif" class="atten-light" />
20                 <span class="">重要提醒:</span> <span>XXXXXXXXXXX</span>
21             </div>-->
22         </div>
23         <div class="main">
24             <div class="main-nav">
25                 
26             </div>
27             <div class="main-top">
28                 <div class="main-tl">
29                     <div class="exl-submit">
30                         <span class="exl-submit-til">Excel上传</span> <a class="btn-upload exl-submit-can"
31                             id="btn-upload" href="#">
32                             <input type="file" id="excel_upload" name="file" />
33                         </a>
34                     </div>
35                 </div>
36                 <div class="main-tr">
37                 </div>
38             </div>
39             <div class="main-mid">
40             </div>
41             <div class="main-bottom">
42                 <div id="loading_info" class="loading-info">
43                 </div>
44                 <div id="execute_result" class="execute-result">
45                     <div id="result-step-two" class="result-wrap">
46                         <div class="result-left"></div>
47                         <div class="result-right"></div>
48                     </div>
49                     <div id="result-step-three" class="result-wrap">
50                     </div>
51                     <div id="result-step-four" class="result-wrap">
52                     </div>
53                     
54                 </div>
55             </div>
56         </div>
57     </div>
58 </body>
59 <script src="http://xxx.xxx.xxx.xxx/commonScript/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
60 <script src="http://xxx.xxx.xxx.xxx/commonScript/format.js" type="text/javascript"></script>
61 <script src="js/ajaxfileupload.js" type="text/javascript"></script>
62 <script src="js/tools.js" type="text/javascript"></script>
63 <script src="js/index.js" type="text/javascript"></script>
64 </html>
复制代码

第二步:ajaxFileUpload.js代码

复制代码
  1 jQuery.extend({
  2     handleError: function (s, xhr, status, e) {
  3         // If a local callback was specified, fire it  
  4         if (s.error) {
  5             s.error.call(s.context || s, xhr, status, e);
  6         }
  7 
  8         // Fire the global callback  
  9         if (s.global) {
 10             (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
 11         }
 12     },
 13     createUploadIframe: function (id, uri) {
 14 
 15         var frameId = \'jUploadFrame\' + id;
 16 
 17         if (window.ActiveXObject) {
 18             if (jQuery.browser.version == "9.0") {
 19                 io = document.createElement(\'iframe\');
 20                 io.id = frameId;
 21                 io.name = frameId;
 22             }
 23             else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
 24 
 25                 var io = document.createElement(\'<iframe id="\' + frameId + \'" name="\' + frameId + \'" />\');
 26                 if (typeof uri == \'boolean\') {
 27                     io.src = \'javascript:false\';
 28                 }
 29                 else if (typeof uri == \'string\') {
 30                     io.src = uri;
 31                 }
 32             }
 33         }
 34         else {
 35             var io = document.createElement(\'iframe\');
 36             io.id = frameId;
 37             io.name = frameId;
 38         }
 39         io.style.position = \'absolute\';
 40         io.style.top = \'-1000px\';
 41         io.style.left = \'-1000px\';
 42 
 43         document.body.appendChild(io);
 44 
 45         return io;
 46     },
 47     ajaxUpload: function (s, xml) {
 48         //if((fromFiles.nodeType&&!((fileList=fromFiles.files)&&fileList[0].name)))  
 49 
 50         var uid = new Date().getTime(), idIO = \'jUploadFrame\' + uid, _this = this;
 51         var jIO = $(\'<iframe name="\' + idIO + \'" id="\' + idIO + \'" style="display:none">\').appendTo(\'body\');
 52         var jForm = $(\'<form action="\' + s.url + \'" target="\' + idIO + \'" method="post" enctype="multipart/form-data" style="display:none"></form>\').appendTo(\'body\');
 53         var oldElement = $(\'#\' + s.fileElementId);
 54         var newElement = $(oldElement).clone();
 55         $(oldElement).attr(\'id\', \'jUploadFile\' + uid);
 56         $(oldElement).before(newElement);
 57         $(oldElement).appendTo(jForm);
 58 
 59         this.remove = function () {
 60             if (_this !== null) {
 61                 jNewFile.before(jOldFile).remove();
 62                 jIO.remove(); jForm.remove();
 63                 _this = null;
 64             }
 65         }
 66         this.onLoad = function () {
 67 
 68             var data = $(jIO[0].contentWindow.document.body).text();
 69 
 70             try {
 71 
 72                 if (data != undefined) {
 73                     data = eval(\'(\' + data + \')\');
 74                     try {
 75 
 76                         if (s.success)
 77                             s.success(data, status);
 78 
 79                         // Fire the global callback  
 80                         if (s.global)
 81                             jQuery.event.trigger("ajaxSuccess", [xml, s]);
 82                         if (s.complete)
 83                             s.complete(data, status);
 84                         xml = null;
 85                     } catch (e) {
 86 
 87                         status = "error";
 88                         jQuery.handleError(s, xml, status, e);
 89                     }
 90 
 91                     // The request was completed  
 92                     if (s.global)
 93                         jQuery.event.trigger("ajaxComplete", [xml, s]);
 94                     // Handle the global AJAX counter  
 95                     if (s.global && ! --jQuery.active)
 96                         jQuery.event.trigger("ajaxStop");
 97 
 98                     // Process result  
 99 
100                 }
101             } catch (ex) {
102                 alert(ex.message);
103             };
104         }
105         this.start = function () { jForm.submit(); jIO.load(_this.onLoad); };
106         return this;
107 
108     },
109     createUploadForm: function (id, url, fileElementId, data) {
110         //create form     
111         var formId = \'jUploadForm\' + id;
112         var fileId = \'jUploadFile\' + id;
113         var form = jQuery(\'<form  action="\' + url + \'" method="POST" name="\' + formId + \'" id="\' + formId + \'" enctype="multipart/form-data"></form>\');
114         if (data) {
115             for (var i in data) {
116                 jQuery(\'<input type="hidden" name="\' + i + \'" value="\' + data[i] + \'" />\').appendTo(form);
117             }
118         }
119 
120         var oldElement = jQuery(\'#\' + fileElementId);
121         var newElement = jQuery(oldElement).clone();
122         jQuery(oldElement).attr(\'id\', fileId);
123         jQuery(oldElement).before(newElement);
124         jQuery(oldElement).appendTo(form);
125 
126         //set attributes  
127         jQuery(form).css(\'position\', \'absolute\');
128         jQuery(form).css(\'top\', \'-1200px\');
129         jQuery(form).css(\'left\', \'-1200px\');
130         jQuery(form).appendTo(\'body\');
131         return form;
132     },
133     ajaxFileUpload: function (s) {
134         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout      
135         // Create the request object  
136         var xml = {};
137         s = jQuery.extend({}, jQuery.ajaxSettings, s);
138         if (window.ActiveXObject) {
139             var upload = new jQuery.ajaxUpload(s, xml);
140             upload.start();
141 
142         } else {
143             var id = new Date().getTime();
144             var form = jQuery.createUploadForm(id, s.url, s.fileElementId, (typeof (s.data) == \'undefined\' ? false : s.data));
145             var io = jQuery.createUploadIframe(id, s.secureuri);
146             var frameId = \'jUploadFrame\' + id;
147             var formId = \'jUploadForm\' + id;
148             // Watch for a new set of requests  
149             if (s.global && !jQuery.active++) {
150                 jQuery.event.trigger("ajaxStart");
151             }
152             var requestDone = false;
153 
154             if (s.global)
155                 jQuery.event.trigger("ajaxSend", [xml, s]);
156             // Wait for a response to come back  
157             var uploadCallback = function (isTimeout) {
158                 var io = document.getElementById(frameId);
159 
160                 try {
161                     if (io.contentWindow) {
162                         xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
163                         xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
164 
165                     } else if (io.contentDocument) {
166                         xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
167                         xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
168                     }
169                 } catch (e) {
170                     jQuery.handleError(s, xml, null, e);
171                 }
172                 if (xml || isTimeout == "timeout") {
173                     requestDone = true;
174                     var status;
175                     try {
176                         status = isTimeout != "timeout" ? "success" : "error";
177                         // Make sure that the request was successful or notmodified  
178                         if (status != "error") {
179                             // process the data (runs the xml through httpData regardless of callback)  
180                             var data = jQuery.uploadHttpData(xml, s.dataType);
181                             // If a local callback was specified, fire it and pass it the data  
182 
183                             if (s.success)
184                                 s.success(data, status);
185 
186                             // Fire the global callback  
187                             if (s.global)
188                                 jQuery.event.trigger("ajaxSuccess", [xml, s]);
189                             if (s.complete)
190                                 s.complete(data, status);
191 
192                         } else
193                             jQuery.handleError(s, xml, status);
194                     } catch (e) {
195                         status = "error";
196                         jQuery.handleError(s, xml, status, e);
197                     }
198 
199                     // The request was completed  
200                     if (s.global)
201                         jQuery.event.trigger("ajaxComplete", [xml, s]);
202                     // Handle the global AJAX counter  
203                     if (s.global && ! --jQuery.active)
204                         jQuery.event.trigger("ajaxStop");
205 
206                     // Process result  
207                     jQuery(io).unbind();
208 
209                     setTimeout(function () {
210                         try {
211                             jQuery(io).remove();
212                             jQuery(form).remove();
213 
214                         } catch (e) {
215                             jQuery.handleError(s, xml, null, e);
216                         }
217 
218                     }, 100);
219 
220                     xml = null;
221 
222                 }
223             };
224             // Timeout checker  
225             if (s.timeout > 0) {
226                 setTimeout(function () {
227                     // Check to see if the request is still happening  
228                     if (!requestDone) uploadCallback("timeout");
229                 }, s.timeout);
230             }
231 
232             try {
233 
234                 var form = jQuery(\'#\' + formId);
235                 jQuery(form).attr(\'action\', s.url);
236                 jQuery(form).attr(\'method\', \'POST\');
237                 jQuery(form).attr(\'target\', frameId);
238 
239                 if (form.encoding) {
240                     jQuery(form).attr(\'encoding\', \'multipart/form-data\');
241                 }
242                 else {
243                     jQuery(form).attr(\'enctype\', \'multipart/form-data\');
244                 }
245 
246 
247                 jQuery(form).submit();
248 
249             } catch (e) {
250                 jQuery.handleError(s, xml, null, e);
251             }
252 
253             jQuery(\'#\' + frameId).load(uploadCallback);
254             return { abort: function () { } };
255 
256         }
257     },
258 
259     uploadHttpData: function (r, type) {
260 
261         var data = !type;
262         data = type == "xml" || data ? r.responseXML : r.responseText;
263         // If the type is "script", eval it in global context  
264         if (type == "script")
265             jQuery.globalEval(data);
266         // Get the JavaScript object, if JSON is used.  
267         if (type == "json") {
268 
269             //eval("data = " + $(data).html());//默认方式,在ie下不好使
270             //data = jQuery.parseJSON(jQuery(data).text());//第一次修改后,ie7、8、9、10可用,ie11不可用
271             try {
272                 data = jQuery.parseJSON(data); //第二次修改,ie全兼容
273             } catch (e) {
274                 data = jQuery.parseJSON(jQuery(data).text());
275             }
276 
277         }
278         // evaluate scripts within html  
279         if (type == "html")
280             jQuery("<div>").html(data).evalScripts();
281 
282         return data;
283     }
284 }); 
复制代码

第三步:index.js代码

复制代码
 1 function fnExcelUpload(event) {
 2     /// <summary>上传Excel</summary>
 3     /// <param name="event" type="Object">file对象</param>
 4     fnPushMainTr();
 5 
 6     $.ajaxFileUpload({
 7         url: "Service.ashx?Type=Upload",
 8         secureuri: false, // 一般设置为false  
 9         fileElementId: "excel_upload", // 文件上传表单的id <input type="file" id="fileUpload" name="file" />  
10         dataType: \'json\', // 返回值类型 一般设置为json  
11         success: function (data) {
12             if (!data || data.reuslt == \'error\' || data.result == \'warning\') {
13                 fnErrorMsg(data);
14                 return;
15             }
16             //设置上传Excel按钮样式
17             $(\'#btn-upload\').removeClass(\'exl-submit-can\').addClass(\'exl-submit-no\').children(\'input\').attr(\'disabled\', true);
18             //设置第一步的样式,并增加文字提示“完成”
19             $(\'#step_one\').removeClass(\'step-one-a\').addClass(\'step-one-b\').siblings(\'p:last\').addClass(\'fc-green\').children(\'span\').text(\'完成\')
20                 .parents(\'li\').addClass(\'fc-green\');
21             $(\'#loading_info\').html(\'<span class="progress">Excel格式校验进行中</span>\');
22             setTimeout(function () {
23                 fnGetState();
24             }, 1000);
25 
26         },
27         error: function (data)// 服务器响应失败处理函数  
28         {
29             console.log("服务器异常");
30         }
31     });
32 }
复制代码

注:使用ajaxFileUpload.js上传excel文件时,在ie9以上会弹出下载窗口,ie7/8会报错缺少“)”,这是因为服务端返回的数据是json,ie无法解析导致的,

  如果之前是application/json的话就会弹出下载窗口,需要将服务器响应头修改为:Content-Type:text/html;charset=UTF-8即可

 

例子:

后台:

[HttpPost]
        public void UploadImg()
        {
            var context = System.Web.HttpContext.Current;
            context.Response.ContentType = "text/html;charset=UTF-8";
            var httpRequest = context.Request;
            if (httpRequest.Files.Count > 0)
            {
                try
                {
                    string url = string.Empty;
                    //foreach (string file in httpRequest.Files)
                    //{
                    var postedFile = httpRequest.Files[httpRequest.Files.AllKeys[0]];
                    int imageLength = postedFile.ContentLength;//取得图片大小,以字节为单位  
                    
                    byte[] imageByteArray = new byte[imageLength];  //图片将临时存储在Byte(二进制)数组  

                    Stream imageStream = postedFile.InputStream;//建立流对象  
                    var type=Path.GetExtension(postedFile.FileName);//取得文件扩展名  
                    imageStream.Read(imageByteArray, 0, imageLength);//将图片读取到imageByteArray数组中,其中0为起始位置,imageLength为要读取的长度  

                    var model = new tbl_OfficeSupplies_GoodsImg();
                    model.ID = Guid.NewGuid();
                    model.Type = type;
                    model.Img = imageByteArray;
                    model.Size = imageLength;
                    model.GoodSpecificationID = new Guid(httpRequest["GoodSpecificationID"]);

                    //删除有的
                    var toDeleteModel= this.Tbl_OfficeSupplies_GoodsImgBLL.LoadEntities(a=>a.GoodSpecificationID== model.GoodSpecificationID).FirstOrDefault();
                    if (toDeleteModel!=null)
                    {
                        //model.ID = toDeleteModel.ID;
                        toDeleteModel.Type = type;
                        toDeleteModel.Img = imageByteArray;
                        toDeleteModel.Size = imageLength;
                        toDeleteModel.GoodSpecificationID = new Guid(httpRequest["GoodSpecificationID"]);
                        this.Tbl_OfficeSupplies_GoodsImgBLL.EditEntity(toDeleteModel);
                    }
                    else {
                        this.Tbl_OfficeSupplies_GoodsImgBLL.AddEntity(model);
                    }

                    
                    context.Response.Write("1");//{\'code\' = \'1\', \'msg\' = \'上传成功\'}

                    context.Response.End();
                    //Common.JsonHelper.toJson(new { code = "1", msg = "上传成功" });
                }
                catch (Exception ex)
                {
                    context.Response.Write("-1");//{\'code\' = \'-1\', \'msg\' = \'上传失败\'}

                    context.Response.End();
                    //return Common.JsonHelper.toJson(new { code = "-1", msg = "上传失败" });
                }

            }
            else
            {
                context.Response.Write("2");//{\'code\' = \'2\', \'msg\' = \'没有选择图片\'}

                context.Response.End();
                //return Common.JsonHelper.toJson(new { code = "2", msg = "没有选择图片" });
            }
        }

  HTML:

<div style="padding:10px 0 10px 60px">
                <table style="width:450px;height:300px;padding:2px;">
                    <tr style="display:none;">
                        <td>规格ID:</td>
                        <td><input id="GoodsSpecificationID" class="easyui-validatebox" type="text" name="GoodsSpecificationID" data-options="required:true" /></td>
                    </tr>
                    <tr>
                        <td>规格名称:</td>
                        <td><input id="GoodsSpecificationName" class="easyui-validatebox" type="text" name="GoodsSpecificationName" data-options="required:true" /></td>
                    </tr>
                    <tr>
                        <td>规格备注:</td>
                        <td><input id="GoodsSpecificationRemark" class="easyui-validatebox" type="text" name="GoodsSpecificationRemark" /></td>
                    </tr>
                    <tr>
                        <td>物品规格图片上传:</td>
                        <td><input id="SpecificationImg" name="myfile" type="file" /></td>
                    </tr>
                    <tr id="GoodsImgTr">
                        <td>物品规格图片:</td>
                        <td><img id="GoodsImg" src="" /></td>
                    </tr>
                </table>
            </div>

  js:

$.ajaxFileUpload({
                                        url: app.webApi + "tbl_OfficeSupplies_GoodsImg/UploadImg?GoodSpecificationID=" + GoodsSpecificationID,
                                        secureuri: false, // 一般设置为false  
                                        fileElementId: "SpecificationImg", // 文件上传表单的id <input type="file" id="fileUpload" name="file" />  
                                        dataType: \'text/html;charset=UTF-8\', // 返回值类型 一般设置为json  
                                        success: function (data) {
                                            if (data == "1") {
                                                $.messager.alert(\'提示\', "上传成功", \'info\');
                                                $(\'#GoodsSpecification\').datagrid(\'reload\');
                                                $(\'#dlg_GoodsSpecification\').dialog(\'close\');
                                            } else if (data == "-1") {
                                                $.messager.alert(\'提示\', 上传失败, \'info\');
                                            }

                                        },
                                        error: function (data)// 服务器响应失败处理函数  
                                        {
                                            console.log("服务器异常");
                                        }
                                    });

  ie7显示文件:

 

后台:

[HttpGet]
        public void GetImgByGoodsSpecificationID(Guid GoodsSpecificationID)
        {
            var context = System.Web.HttpContext.Current;
            var modelList = this.Tbl_OfficeSupplies_GoodsImgBLL.LoadEntities(a => a.GoodSpecificationID == GoodsSpecificationID);
            if (modelList.Count() > 0) {
                var model = modelList.First();
                context.Response.ContentType = "text/html;charset=UTF-8";//设置输出类型  

                context.Response.OutputStream.Write((byte[])model.Img, 0, (int)model.Size);

                context.Response.End();
            }
            else
            {
                context.Response.Write("-1");
                context.Response.End();
            }
        }

  前台:

<!--新增编辑物品规格-->
        <div id="dlg_GoodsSpecification" class="easyui-dialog" title="规格" style="width:530px;height:300px;padding:2px;"
             data-options="
				iconCls: \'icon-Extend-shoppingTrolley\',
				buttons: \'#dlg-buttonsGoodsSpecification\',
                modal: true,
                closed: true
			">
            <div style="padding:10px 0 10px 60px">
                <table style="width:450px;padding:2px;">
                    <tr style="display:none;">
                        <td>规格ID:</td>
                        <td><input id="GoodsSpecificationID" class="easyui-validatebox" type="text" name="GoodsSpecificationID" data-options="required:true" /></td>
                    </tr>
                    <tr>
                        <td>规格名称:</td>
                        <td><input id="GoodsSpecificationName" class="easyui-validatebox" type="text" name="GoodsSpecificationName" data-options="required:true" /></td>
                    </tr>
                    <tr>
                        <td>规格备注:</td>
                        <td><input id="GoodsSpecificationRemark" class="easyui-validatebox" type="text" name="GoodsSpecificationRemark" /></td>
                    </tr>
                    <tr>
                        <td>物品规格图片上传:</td>
                        <td><input id="SpecificationImg" name="myfile" type="file" /></td>
                    </tr>
                    <tr id="GoodsImgTr">
                        <td>物品规格图片:</td>
                        <td><img style="max-height:100px;" id="GoodsImg" src="" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="dlg-buttonsGoodsSpecification">
            <a id="dlg-buttons-savebuttonsGoodsSpecification" href="javascript:void(0)" class="easyui-linkbutton">保存</a>
        </div>
        <!--新增编辑物品规格-->

  js:

$("#GoodsImg").attr("src", app.webApi + "tbl_OfficeSupplies_GoodsImg/GetImgByGoodsSpecificationID?GoodsSpecificationID=" + GoodsSpecification.ID + "&n=" + newGuid());

  

以上是关于上传文件ie7的主要内容,如果未能解决你的问题,请参考以下文章

java Ftp上传创建多层文件的代码片段

我在百度空间里上传照片时不能显示缩略图,而上传完以后不能显示文件名(我用的是IE7),请问如何解决?

Alamofire 文件上传出现错误“JSON 文本未以数组或对象开头,并且允许未设置片段的选项”

将存储在内存中的文件上传到s3

JS创建文件并上传服务器

java大文件分片上传插件