首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

c# 使用ajaxfileupload上传文件，通过一般处理程序（Handler）接收文件 ashx 图片 Excel文件都可以

时间：2021-03-17 15:09:53   收藏：0   阅读：0

https://blog.csdn.net/sinat_16998945/article/details/81125950

界面如下图：

技术图片HTML代码如下：

  1. <html >
  2. <head >
  3.     <!-- 引入jquery   ajaxfileupload.js     -->
  4.     <!-- ajaxfileupload.js  为了兼容IE不同版本，需要修改源代码，文章附带源代码   -->
  5.     <script src="../../Content/js/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
  6.     <script src="../../Content/js/ajaxfileupload.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9.     <div>
  10.         <div>
  11.             <input type="file" id="fileExcel" name="fileExcel"  />
  12.             <a onclick="ajaxFileUpload()" href="javascript:void(0);" >上传</a> 
  13.         </div>
  14.     </div>
  15. </body>
  16. <script type="text/javascript">
  17.     function ajaxFileUpload() {
  18.        try {
  19.             $.ajaxFileUpload({
  20.                 url: ‘../../AjaxHandler/SIMManage/SIMInfoHandler.ashx?action=UpFile‘, //用于文件上传的服务器端请求地址
  21.                 secureuri: false, //是否需要安全协议，一般设置为false
  22.                 fileElementId: ‘fileExcel‘, //文件上传域的ID
  23.                 dataType: ‘json‘, //返回值类型 一般设置为json
  24.                 success: function (data, status)  //服务器成功响应处理函数
  25.                 {
  26.                     //上传成功
  27.  
  28.                 },
  29.                 error: function (data, status, e)//服务器响应失败处理函数
  30.                 {
  31.                     alert(e);
  32.                 }
  33.             })
  34.        } catch (e) {
  35.            alert(e.Message)
  36.        }
  37.         return false;
  38.     }
  39. </script>
  40. </html>

ajaxfileupload源代码修改如下：

        //      源代码
        //        if(window.ActiveXObject) {
        //            var io = document.createElement(‘<iframe id="‘ + frameId + ‘" name="‘ + frameId + ‘" />‘);
        //            if(typeof uri== ‘boolean‘){
        //                io.src = ‘javascript:false‘;
        //            }
        //            else if(typeof uri== ‘string‘){
        //                io.src = uri;
        //            }
        //        }else {
        //            var io = document.createElement(‘iframe‘);
        //           io.id = frameId;
        //            io.name = frameId;
        //        }

        //修改源代码，参考网上大神修改内容
        if (window.ActiveXObject) {
            if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0") {
                var io = document.createElement(‘iframe‘);
                io.id = frameId;
                io.name = frameId;
            } else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
                var io = document.createElement(‘<iframe id="‘ + frameId + ‘" name="‘ + frameId + ‘" />‘);
                if (typeof uri == ‘boolean‘) {
                    io.src = ‘javascript:false‘;
                }
                else if (typeof uri == ‘string‘) {
                    io.src = uri;
                }
            }
        }
        else {
            var io = document.createElement(‘iframe‘);
            io.id = frameId;
            io.name = frameId;
        }

 

  1.  
  2. jQuery.extend({
  3.     createUploadIframe: function (id, uri) {
  4.         //create frame
  5.         var frameId = ‘jUploadFrame‘ + id;
  6.  
  7.         //*********************************************源代码，参考网上大神修改内容
  8.         //        if(window.ActiveXObject) {
  9.         //            var io = document.createElement(‘<iframe id="‘ + frameId + ‘" name="‘ + frameId + ‘" />‘);
  10.         //            if(typeof uri== ‘boolean‘){
  11.         //                io.src = ‘javascript:false‘;
  12.         //            }
  13.         //            else if(typeof uri== ‘string‘){
  14.         //                io.src = uri;
  15.         //            }
  16.         //        }else {
  17.         //            var io = document.createElement(‘iframe‘);
  18.         //           io.id = frameId;
  19.         //            io.name = frameId;
  20.         //        }
  21.  
  22.         //***********************************************修改源代码
  23.         if (window.ActiveXObject) {
  24.             if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0") {
  25.                 var io = document.createElement(‘iframe‘);
  26.                 io.id = frameId;
  27.                 io.name = frameId;
  28.             } else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
  29.                 var io = document.createElement(‘<iframe id="‘ + frameId + ‘" name="‘ + frameId + ‘" />‘);
  30.                 if (typeof uri == ‘boolean‘) {
  31.                     io.src = ‘javascript:false‘;
  32.                 }
  33.                 else if (typeof uri == ‘string‘) {
  34.                     io.src = uri;
  35.                 }
  36.             }
  37.         }
  38.         else {
  39.             var io = document.createElement(‘iframe‘);
  40.             io.id = frameId;
  41.             io.name = frameId;
  42.         }
  43.         io.style.position = ‘absolute‘;
  44.         io.style.top = ‘-1000px‘;
  45.         io.style.left = ‘-1000px‘;
  46.  
  47.         document.body.appendChild(io);
  48.  
  49.         return io
  50.     },
  51.     createUploadForm: function (id, fileElementId) {
  52.         //create form
  53.         var formId = ‘jUploadForm‘ + id;
  54.         var fileId = ‘jUploadFile‘ + id;
  55.         var form = $(‘<form  action="" method="POST" name="‘ + formId + ‘" id="‘ + formId + ‘" enctype="multipart/form-data"></form>‘);
  56.         var oldElement = $(‘#‘ + fileElementId);
  57.         var newElement = $(oldElement).clone();
  58.         $(oldElement).attr(‘id‘, fileId);
  59.         $(oldElement).before(newElement);
  60.         $(oldElement).appendTo(form);
  61.         //set attributes
  62.         $(form).css(‘position‘, ‘absolute‘);
  63.         $(form).css(‘top‘, ‘-1200px‘);
  64.         $(form).css(‘left‘, ‘-1200px‘);
  65.         $(form).appendTo(‘body‘);
  66.         return form;
  67.     },
  68.     addOtherRequestsToForm: function (form, data) {
  69.         // add extra parameter
  70.         var originalElement = $(‘<input type="hidden" name="" value="">‘);
  71.         for (var key in data) {
  72.             name = key;
  73.             value = data[key];
  74.             var cloneElement = originalElement.clone();
  75.             cloneElement.attr({ ‘name‘: name, ‘value‘: value });
  76.             $(cloneElement).appendTo(form);
  77.         }
  78.         return form;
  79.     },
  80.  
  81.     ajaxFileUpload: function (s) {
  82.         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
  83.         s = jQuery.extend({}, jQuery.ajaxSettings, s);
  84.         var id = new Date().getTime()
  85.         var form = jQuery.createUploadForm(id, s.fileElementId);
  86.         if (s.data) form = jQuery.addOtherRequestsToForm(form, s.data);
  87.         var io = jQuery.createUploadIframe(id, s.secureuri);
  88.         var frameId = ‘jUploadFrame‘ + id;
  89.         var formId = ‘jUploadForm‘ + id;
  90.         // Watch for a new set of requests
  91.         if (s.global && !jQuery.active++) {
  92.             jQuery.event.trigger("ajaxStart");
  93.         }
  94.         var requestDone = false;
  95.         // Create the request object
  96.         var xml = {}
  97.         if (s.global)
  98.             jQuery.event.trigger("ajaxSend", [xml, s]);
  99.         // Wait for a response to come back
  100.         var uploadCallback = function (isTimeout) {
  101.             var io = document.getElementById(frameId);
  102.             try {
  103.                 if (io.contentWindow) {
  104.                     xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
  105.                     xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
  106.  
  107.                 } else if (io.contentDocument) {
  108.                     xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
  109.                     xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
  110.                 }
  111.             } catch (e) {
  112.                 jQuery.handleError(s, xml, null, e);
  113.             }
  114.             if (xml || isTimeout == "timeout") {
  115.                 requestDone = true;
  116.                 var status;
  117.                 try {
  118.                     status = isTimeout != "timeout" ? "success" : "error";
  119.                     // Make sure that the request was successful or notmodified
  120.                     if (status != "error") {
  121.                         // process the data (runs the xml through httpData regardless of callback)
  122.                         var data = jQuery.uploadHttpData(xml, s.dataType);
  123.                         // If a local callback was specified, fire it and pass it the data
  124.                         if (s.success)
  125.                             s.success(data, status);
  126.  
  127.                         // Fire the global callback
  128.                         if (s.global)
  129.                             jQuery.event.trigger("ajaxSuccess", [xml, s]);
  130.                     } else
  131.                         jQuery.handleError(s, xml, status);
  132.                 } catch (e) {
  133.                     status = "error";
  134.                     jQuery.handleError(s, xml, status, e);
  135.                 }
  136.  
  137.                 // The request was completed
  138.                 if (s.global)
  139.                     jQuery.event.trigger("ajaxComplete", [xml, s]);
  140.  
  141.                 // Handle the global AJAX counter
  142.                 if (s.global && ! --jQuery.active)
  143.                     jQuery.event.trigger("ajaxStop");
  144.  
  145.                 // Process result
  146.                 if (s.complete)
  147.                     s.complete(xml, status);
  148.  
  149.                 jQuery(io).unbind()
  150.  
  151.                 setTimeout(function () {
  152.                     try {
  153.                         $(io).remove();
  154.                         $(form).remove();
  155.  
  156.                     } catch (e) {
  157.                         jQuery.handleError(s, xml, null, e);
  158.                     }
  159.  
  160.                 }, 100)
  161.  
  162.                 xml = null
  163.  
  164.             }
  165.         }
  166.         // Timeout checker
  167.         if (s.timeout > 0) {
  168.             setTimeout(function () {
  169.                 // Check to see if the request is still happening
  170.                 if (!requestDone) uploadCallback("timeout");
  171.             }, s.timeout);
  172.         }
  173.         try {
  174.             // var io = $(‘#‘ + frameId);
  175.             var form = $(‘#‘ + formId);
  176.             $(form).attr(‘action‘, s.url);
  177.             $(form).attr(‘method‘, ‘POST‘);
  178.             $(form).attr(‘target‘, frameId);
  179.             if (form.encoding) {
  180.                 form.encoding = ‘multipart/form-data‘;
  181.             }
  182.             else {
  183.                 form.enctype = ‘multipart/form-data‘;
  184.             }
  185.             $(form).submit();
  186.  
  187.         } catch (e) {
  188.             jQuery.handleError(s, xml, null, e);
  189.         }
  190.         if (window.attachEvent) {
  191.             document.getElementById(frameId).attachEvent(‘onload‘, uploadCallback);
  192.         }
  193.         else {
  194.             document.getElementById(frameId).addEventListener(‘load‘, uploadCallback, false);
  195.         }
  196.         return { abort: function () { } };
  197.  
  198.     },
  199.  
  200.     uploadHttpData: function (r, type) {
  201.         var data = !type;
  202.         data = type == "xml" || data ? r.responseXML : r.responseText;
  203.         // If the type is "script", eval it in global context
  204.         if (type == "script")
  205.             jQuery.globalEval(data);
  206.         // Get the JavaScript object, if JSON is used.
  207.         if (type == "json") {
  208.             // If you add mimetype in your response,
  209.             // you have to delete the ‘<pre></pre>‘ tag.
  210.             // The pre tag in Chrome has attribute, so have to use regex to remove
  211.             var data = r.responseText;
  212.             var rx = new RegExp("<pre.*?>(.*?)</pre>", "i");
  213.             var am = rx.exec(data);
  214.             //this is the desired data extracted
  215.             var data = (am) ? am[1] : "";    //the only submatch or empty
  216.             eval("data = " + data);
  217.         }
  218.         // evaluate scripts within html
  219.         if (type == "html")
  220.             jQuery("<div>").html(data).evalScripts();
  221.         //alert($(‘param‘, data).each(function(){alert($(this).attr(‘value‘));}));
  222.         return data;
  223.     }
  224. })
  225.

 

一般处理程序（Handler）接收文件代码如下

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.SessionState;
  6. using System.IO;
  7.  
  8. namespace Web.AjaxHandler.SIMManage
  9. {
  10.     /// <summary>
  11.     /// SIMInfoHandler 的摘要说明
  12.     /// </summary>
  13.     public class SIMInfoHandler : IHttpHandler
  14.     {
  15.  
  16.         HttpRequest Request;
  17.         HttpResponse Response;
  18.         public void ProcessRequest(HttpContext context)
  19.         {
  20.             context.Response.ContentType = "text/plain";
  21.             Request = context.Request;
  22.             Response = context.Response;
  23.             string action = Request.QueryString["action"];
  24.             switch (action)
  25.             {
  26.                 case "UpFile":
  27.                     UpFile();
  28.                     break;
  29.             }
  30.         }
  31.  
  32.         private void UpFile()
  33.         {
  34.             HttpFileCollection files = Request.Files;
  35.             string msg = string.Empty;
  36.             string error = string.Empty;
  37.             string res = string.Empty;
  38.             try
  39.             {
  40.  
  41.                 string filename = System.IO.Path.GetFileName(files[0].FileName);
  42.  
  43.                 //判断是否有文件
  44.                 if (filename == "")
  45.                 {
  46.                     Response.Write("上传文件为空，请选择上传文件格式为‘.xls‘的文件。");
  47.                     return;
  48.                 }
  49.  
  50.                 string [] strArrary = filename.Split(‘.‘);
  51.                 //判断文件格式
  52.                 if (strArrary.LastOrDefault() != "xls" && strArrary.LastOrDefault() != "xlsx")
  53.                 {
  54.                     Response.Write("上传文件格式不正确，请选择上传文件格式为‘.xls‘或‘.xlsx‘的文件。");
  55.                     return;
  56.                 }
  57.  
  58.                 //存放文件
  59.                 if (Directory.Exists(HttpContext.Current.Server.MapPath("~/Document/TemporaryDocuments")) == false)//如果不存在就创建file文件夹
  60.                 {
  61.                     Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/Document/TemporaryDocuments"));
  62.                 }
  63.                 string url = "~/Document/TemporaryDocuments/" + filename;
  64.                 string path = HttpContext.Current.Server.MapPath(url);
  65.                 files[0].SaveAs(path);
  66.  
  67.                 Response.Write("上传文件成功");
  68.                 return;
  69.             }
  70.             catch (Exception ex)
  71.             {
  72.             }
  73.         }
  74.  
  75.         public bool IsReusable
  76.         {
  77.             get
  78.             {
  79.                 return false;
  80.             }
  81.         }
  82.     }
  83. }

技术图片

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！