阿拉卡拉卡韩国

来源：互联网发布：剑网三淘宝买金编辑：程序博客网时间：2024/06/02 07:38

先上几张图更直观展示一下要实现的功能，本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能，结合NPOI2.0实现数据读取。这个功能在实际工作种经常用到，希望能给需要做这方面的人有些帮助。

一、功能页面布局及介绍

1、上传页面布局及input file上传功能

Excel文件上传和读取-1

2、上传页面文件正在上传效果

Excel文件上传和读取-2

3、上传完成效果，多文件展示区

Excel文件上传和读取-3

二、功能代码实现及资源引用

1、js资源文件引用
html页面js引用，需要引用jquery文件，我这里用到jquery-1.8.1.min.js和ajaxfileupload.js插件。ajaxfileupload.js插件下载地址：http://download.csdn.net/detail/fuyifang/8534801

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery-1.8.1.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/ajaxfileupload.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

2、html页面实现代码
采用html+jquey ajax方式去实现上传功能，可以下载Excel导入模版；

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inlin-label-box"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span>></span>选择剔除用户：<span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">" width:220px;"</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"file"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"fu_UploadFile"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"fu_UploadFile"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"height:26px;"</span> /></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"Upload()"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"上传"</span>  <span class="hljs-attribute">style</span>=<span class="hljs-value">"height: 26px; padding: 0px 10px 0px 10px;margin-left:10px;"</span>  <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn"</span> /></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"tip-inline"</span>></span>（<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"Template/剔除上传数据导入格式.xlsx"</span>></span>下载Excel导入模板<span class="hljs-tag"></<span class="hljs-title">a</span>></span>）<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span>></span><span class="hljs-tag"><<span class="hljs-title">iframe</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">""</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"downloadFrame"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"display: none;"</span>></span><span class="hljs-tag"></<span class="hljs-title">iframe</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul>

3、JavaScript客户端实现代码
ajaxfileupload.js结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能并且显示灰色遮罩；

<code class="hljs javascript has-numbering"><span class="hljs-comment">//文件上传事件方法</span><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Upload</span><span class="hljs-params">()</span>{</span>    <span class="hljs-comment">//如果有需要验证的可以在这里操作</span>    UploadFile();}<span class="hljs-comment">//文件上传逻辑方法</span><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">UploadFile</span><span class="hljs-params">()</span> {</span>    <span class="hljs-comment">//任务id，这里偷懒了直接复制页面服务器端空间生成后ID</span>    <span class="hljs-keyword">var</span> JobinfoId = jQuery(<span class="hljs-string">"#ctl00_ContentPlaceHolder1_hd_JobinfoId"</span>).val();    <span class="hljs-keyword">var</span> PlanCode = jQuery(<span class="hljs-string">"#ctl00_ContentPlaceHolder1_hd_PlanCode"</span>).val();    <span class="hljs-keyword">var</span> path = document.getElementById(<span class="hljs-string">"fu_UploadFile"</span>).value;    <span class="hljs-keyword">if</span> ($.trim(path) == <span class="hljs-string">""</span>) { alert(<span class="hljs-string">"请选择要上传的文件"</span>); <span class="hljs-keyword">return</span>; }    <span class="hljs-comment">//弹出上传等待提示框</span>    hideReg(<span class="hljs-string">"div_error"</span>); <span class="hljs-comment">//隐藏错误提示</span>    jQuery(<span class="hljs-string">"#div_UpExcelLoading_msg"</span>).html(<span class="hljs-string">"文件数据正在上传中，请耐心等待！"</span>);    showDialogue(<span class="hljs-string">"div_Confirm"</span>);    showReg(<span class="hljs-string">"div_UpExcelLoading"</span>);    <span class="hljs-keyword">var</span> result_msg = <span class="hljs-string">""</span>;    $.ajaxFileUpload({        url: <span class="hljs-string">'Ajax/ajaxUpFile.ashx'</span>,        type: <span class="hljs-string">'post'</span>,        secureuri: <span class="hljs-literal">false</span>, <span class="hljs-comment">//一般设置为false</span>        fileElementId: <span class="hljs-string">'fu_UploadFile'</span>, <span class="hljs-comment">// 上传文件的id、name属性名</span>        dataType: <span class="hljs-string">'json'</span>, <span class="hljs-comment">//返回值类型，一般设置为json、application/json</span>        data: { <span class="hljs-string">"JobinfoId"</span>: JobinfoId, <span class="hljs-string">"PlanCode"</span>: PlanCode }, <span class="hljs-comment">//传递参数到服务器</span>        success: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data, status)</span> {</span>            <span class="hljs-keyword">var</span> result = <span class="hljs-built_in">eval</span>(<span class="hljs-string">"["</span> + data + <span class="hljs-string">"]"</span>);            hideReg(<span class="hljs-string">"div_UpExcelLoading"</span>);            <span class="hljs-keyword">if</span> (result[<span class="hljs-number">0</span>].code == <span class="hljs-number">3</span>) {                result_msg += <span class="hljs-string">"文件上传成功！"</span>;                <span class="hljs-keyword">var</span> id = result[<span class="hljs-number">0</span>].id;                <span class="hljs-keyword">var</span> name = result[<span class="hljs-number">0</span>].file_name;                <span class="hljs-comment">//$("#file_name").html(result[0].file_name + "-下载");</span>                $(<span class="hljs-string">"#plList_file"</span>).append(<span class="hljs-string">"<label style='white-space: normal;overflow: hidden;cursor: pointer;' id='lb_"</span> + id + <span class="hljs-string">"' style=\"margin-left: 10px;\" title='"</span> + name + <span class="hljs-string">"'> <a href=\"#\" id=\"file_name"</span> + id + <span class="hljs-string">"\" onclick=\"behaviorObj.DownloadFile("</span> + id + <span class="hljs-string">");\">"</span> + name + <span class="hljs-string">"</a><img id='img_"</span> + id + <span class="hljs-string">"' src=\"css/cupertino/images/cross_circle.png\" style=\"height: 10px; line-height: 10px;margin-left: 2px;\" alt=\"删除\" onclick=\"RemoveFile("</span> + id + <span class="hljs-string">");\" />  </label>"</span>);                <span class="hljs-comment">//alert(result_msg);</span>                jQuery(<span class="hljs-string">"#span_msg"</span>).html(result_msg);                showDialogue(<span class="hljs-string">"div_Confirm"</span>);                showReg(<span class="hljs-string">"div_error"</span>);            } <span class="hljs-keyword">else</span> {                <span class="hljs-comment">//alert(result[0].msg);</span>                jQuery(<span class="hljs-string">"#span_msg"</span>).html(result[<span class="hljs-number">0</span>].msg);                showDialogue(<span class="hljs-string">"div_Confirm"</span>);                showReg(<span class="hljs-string">"div_error"</span>);            }        },        error: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data, status, e)</span> {</span>            <span class="hljs-comment">// alert(e);</span>            alert(<span class="hljs-string">"错误：上传组件错误，请检察网络!"</span>);        }    });}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li></ul>

4、ajaxUpFile.ashx实现代码
这个地方值得注意的是需要读取Excel文件，需要引用NPOI的dll，这个可以在百度上搜索一下，尽量采用新版本，兼容性好。
也可以在CSDN下载NOPI，下载地址：http://download.csdn.net/detail/xiaopenglin/4365472

需要引用的NPOI的命名空间如下：

<code class="hljs avrasm has-numbering">using NPOI<span class="hljs-preprocessor">.SS</span><span class="hljs-preprocessor">.UserModel</span><span class="hljs-comment">;</span>using NPOI<span class="hljs-preprocessor">.HSSF</span><span class="hljs-preprocessor">.UserModel</span><span class="hljs-comment">;</span>using NPOI<span class="hljs-preprocessor">.XSSF</span><span class="hljs-preprocessor">.UserModel</span><span class="hljs-comment">;</span>using Marketing<span class="hljs-preprocessor">.Utility</span><span class="hljs-comment">;</span>using Newtonsoft<span class="hljs-preprocessor">.Json</span><span class="hljs-comment">;</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

C# Excel读取写入等功能实现代码：

<code class="hljs cs has-numbering"><span class="hljs-keyword">using</span> System;<span class="hljs-keyword">using</span> System.Collections.Generic;<span class="hljs-keyword">using</span> System.Linq;<span class="hljs-keyword">using</span> System.Web;<span class="hljs-keyword">using</span> System.IO;<span class="hljs-keyword">using</span> System.Net;<span class="hljs-keyword">using</span> NPOI.SS.UserModel;<span class="hljs-keyword">using</span> NPOI.HSSF.UserModel;<span class="hljs-keyword">using</span> NPOI.XSSF.UserModel;<span class="hljs-keyword">using</span> Marketing.Utility;<span class="hljs-keyword">using</span> Newtonsoft.Json;<span class="hljs-keyword">using</span> System.Text;<span class="hljs-keyword">using</span> Marketing.BLL;<span class="hljs-keyword">using</span> Marketing.Entity.DataModel;namespace Marketing.WebSite.Ajax{    <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> <span class="hljs-xmlDocTag"><summary></span></span>    <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> Summary description for ajaxUpFile</span>    <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> <span class="hljs-xmlDocTag"></summary></span></span>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> ajaxUpFile : IHttpHandler    {        <span class="hljs-comment">//剔除数据上传表</span>        MdDatacubeofremovedetailBL _MdDatacubeofremovedetailBL = <span class="hljs-keyword">new</span> MdDatacubeofremovedetailBL();        <span class="hljs-comment">//任务主表业务逻辑层</span>        MdDatacubeofjobinfoBL _MdDatacubeofjobinfoBL = <span class="hljs-keyword">new</span> MdDatacubeofjobinfoBL();        <span class="hljs-comment">//文件上传记录表业务层</span>        MdDatacubeofremovefileBL _MdDatacubeofremovefileBL = <span class="hljs-keyword">new</span> MdDatacubeofremovefileBL();        <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> CLogger _logger = <span class="hljs-keyword">new</span> CLogger(<span class="hljs-string">"AjaxUpFile"</span>); <span class="hljs-comment">//声明日志记录对象</span>        <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">ProcessRequest</span>(HttpContext context)        {            <span class="hljs-keyword">var</span> json = JsonConvert.SerializeObject(<span class="hljs-keyword">new</span> { code = <span class="hljs-number">0</span>, msg = <span class="hljs-string">"操作失败"</span> });            context.Response.ContentType = <span class="hljs-string">"text/html"</span>;<span class="hljs-comment">//这里很关键，虽然前台数据类型是json，但这里一定要写html  </span>            <span class="hljs-comment">//获取前台传来的文件  </span>            <span class="hljs-comment">//HttpFileCollection files = HttpContext.Current.Request.Files;</span>            HttpPostedFile _upfile = context.Request.Files[<span class="hljs-string">"fu_UploadFile"</span>];            <span class="hljs-keyword">if</span> (_upfile != <span class="hljs-keyword">null</span>)            {                <span class="hljs-keyword">string</span> result = FileUpLoad(_upfile);                context.Response.Write(result);            }        }        <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> <span class="hljs-xmlDocTag"><summary></span></span>        <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span>文件上传方法</span>        <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> <span class="hljs-xmlDocTag"></summary></span></span>        <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> <span class="hljs-xmlDocTag"><param name="file"></span>HttpPostedFile<span class="hljs-xmlDocTag"></param></span></span>        <span class="hljs-comment"><span class="hljs-xmlDocTag">///</span> <span class="hljs-xmlDocTag"><returns></span><span class="hljs-xmlDocTag"></returns></span></span>        <span class="hljs-keyword">private</span> <span class="hljs-keyword">string</span> <span class="hljs-title">FileUpLoad</span>(HttpPostedFile file)        {            <span class="hljs-keyword">var</span> json = JsonConvert.SerializeObject(<span class="hljs-keyword">new</span> { code = <span class="hljs-number">0</span>, msg = <span class="hljs-string">""</span> });            <span class="hljs-comment">//得到当前规则ID</span>            <span class="hljs-keyword">var</span> JobinfoId = HttpContext.Current.Request.Form[<span class="hljs-string">"JobinfoId"</span>];            <span class="hljs-comment">//数据包号ID</span>            <span class="hljs-keyword">var</span> PlanCode = HttpContext.Current.Request.Form[<span class="hljs-string">"PlanCode"</span>];            <span class="hljs-keyword">int</span> FType = <span class="hljs-number">0</span>;<span class="hljs-comment">//文件类型</span>            <span class="hljs-keyword">string</span> fileName, fileExtension;<span class="hljs-comment">//文件名</span>            fileName = System.IO.Path.GetFileName(file.FileName);            fileExtension = System.IO.Path.GetExtension(fileName).ToLower();            <span class="hljs-keyword">int</span> FileLen = file.ContentLength;            Byte[] files = <span class="hljs-keyword">new</span> Byte[FileLen];            Stream sr = file.InputStream;<span class="hljs-comment">//创建数据流对象 </span>            sr.Read(files, <span class="hljs-number">0</span>, FileLen);            sr.Close();            <span class="hljs-keyword">string</span> fileType = Path.GetExtension(fileName).ToLower();            <span class="hljs-keyword">if</span> (!fileType.Equals(<span class="hljs-string">".xlsx"</span>) && !fileType.Equals(<span class="hljs-string">".xls"</span>))            {                json = JsonConvert.SerializeObject(<span class="hljs-keyword">new</span> { code = <span class="hljs-number">0</span>, msg = <span class="hljs-string">"必须上传Excel文件"</span> });            }            <span class="hljs-keyword">else</span>            {                <span class="hljs-keyword">var</span> emsg = <span class="hljs-keyword">string</span>.Empty;                <span class="hljs-keyword">string</span> BatchNo = <span class="hljs-keyword">this</span>.GenerateGUID();<span class="hljs-comment">//得到唯一批号</span>                MdDatacubeofjobinfo MdDatacubeofjobinfoModel = _MdDatacubeofjobinfoBL.FindByPk(JobinfoId.ToInt(<span class="hljs-number">0</span>));                <span class="hljs-keyword">if</span> (MdDatacubeofjobinfoModel != <span class="hljs-keyword">null</span>)                {                    <span class="hljs-comment">//验证数据</span>                    IWorkbook workbook = <span class="hljs-keyword">null</span>;                    <span class="hljs-keyword">using</span> (MemoryStream ms = <span class="hljs-keyword">new</span> MemoryStream(files, <span class="hljs-number">0</span>, files.Length))                    {</code>

0 0