上传文件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="data: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

最新文章

热门文章