快捷導(dǎo)航

C#實(shí)現(xiàn)文件上傳以及多文件上傳功能

更新時(shí)間：2017年05月11日 13:58:07 作者：陳逸子風(fēng)

這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)文件上傳以及多文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、前端搭建

1、前端用到j(luò)s:uploadify(下載地址：http://www.uploadify.com/download/)、layer （下載地址：http://layer.layui.com/），下載之后把它們放在你的項(xiàng)目里列如

2、根據(jù)你的需要在你項(xiàng)目適當(dāng)?shù)奈恢媒⑸蟼魑募哪夸?nbsp; 列如（File）

到此前端搭建結(jié)束

二、配置文件修改（可選擇跳過此步驟）

1、首先說明下，這個(gè)步驟可以跳過，此步驟主要是修改上傳文件大小的限制（.net 默認(rèn)最大只能上傳4M）如若需要修改請繼續(xù)閱讀該步驟。

2、打開web.config 配置文件找到<system.web> 節(jié)點(diǎn) ，在該節(jié)點(diǎn)下面添加如下節(jié)點(diǎn)

<httpRuntime targetFramework="4.5" executionTimeout="500" maxRequestLength="409600" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />
<!-- maxRequestLength屬性是上傳文件大小的設(shè)置 值是kb大小 maxRequestLength=“1024” 為最大上傳1M -->

三、代碼編寫

1、說明下：我用的是mvc模式所以這里就用mvc的方式編寫（代碼是不變的，開發(fā)者可以根據(jù)你們的設(shè)計(jì)模式編寫）

2、建立一個(gè)控制器PageBaseController在該控制器里編寫如下代碼?。ㄈ绻怯玫腶spx頁面那么把FileUpdateView方法刪掉，把UploadifyFile 方法的ActionResult改成void 并去掉return null；）　

后端代碼如下

/// <summary>
  /// 文件上傳頁面
  /// </summary>
  /// <returns></returns>
  public ActionResult FileUpdateView()
  {
   return View();
  }

  /// <summary>
  /// 文件處理方法
  /// </summary>
  /// <param name="filedata"></param>
  /// <returns></returns>
  public ActionResult UploadifyFile(HttpPostedFileBase filedata)
  {
   if (filedata == null ||
    String.IsNullOrEmpty(filedata.FileName) ||
    filedata.ContentLength == 0)
   {
    return HttpNotFound();
   }

   string filename = System.IO.Path.GetFileName(filedata.FileName);
   string virtualPath = String.Format("~/File/{0}", filename);

   string path = Server.MapPath(virtualPath);
   // 以下注釋的代碼 都可以獲得文件屬性
   // System.Diagnostics.FileVersionInfo info = System.Diagnostics.FileVersionInfo.GetVersionInfo(path);
   // FileInfo file = new FileInfo(filedata.FileName);

   filedata.SaveAs(path);
   return null;
  }

注：virtualPath 是我們搭建上傳文件的目錄

3、在視圖（頁面）里引用我們搭建的js：uploadfiy 、layer 路徑

列如:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/lib/layer/layer.js"></script>
<link href="~/Scripts/lib/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/lib/uploadify/jquery.uploadify.min.js"></script>

注：這里我們用到了jquery

4、前端代碼

<script type="text/javascript">
 var uploadifyOnSelectError;
 var uploadifyOnUploadError;
 var uploadifyOnSelect;
 var uploadifyOnUploadSuccess;
 uploadifyOnSelectError = function (file, errorCode, errorMsg) {
  var msgText = "上傳失敗\n";
  switch (errorCode) {
   case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
    //this.queueData.errorMsg = "每次最多上傳 " + this.settings.queueSizeLimit + "個(gè)文件";
    msgText += "每次最多上傳 " + this.settings.queueSizeLimit + "個(gè)文件";
    break;
   case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
    msgText += "文件大小超過限制( " + this.settings.fileSizeLimit + " )";
    break;
   case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
    msgText += "文件大小為0";
    break;
   case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
    msgText += "文件格式不正確，僅限 " + this.settings.fileTypeExts;
    break;
   default:
    msgText += "錯(cuò)誤代碼：" + errorCode + "\n" + errorMsg;
  }
  layer.msg(msgText);
 };
 uploadifyOnUploadError = function (file, errorCode, errorMsg, errorString) {
  // 手工取消不彈出提示
  if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED
   || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
   return;
  }
  var msgText = "上傳失敗\n";
  switch (errorCode) {
   case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
    msgText += "HTTP 錯(cuò)誤\n" + errorMsg;
    break;
   case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
    msgText += "上傳文件丟失，請重新上傳";
    break;
   case SWFUpload.UPLOAD_ERROR.IO_ERROR:
    msgText += "IO錯(cuò)誤";
    break;
   case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
    msgText += "安全性錯(cuò)誤\n" + errorMsg;
    break;
   case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
    msgText += "每次最多上傳 " + this.settings.uploadLimit + "個(gè)";
    break;
   case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
    msgText += errorMsg;
    break;
   case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
    msgText += "找不到指定文件，請重新操作";
    break;
   case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
    msgText += "參數(shù)錯(cuò)誤";
    break;
   default:
    msgText += "文件:" + file.name + "\n錯(cuò)誤碼:" + errorCode + "\n"
     + errorMsg + "\n" + errorString;
  }
  layer.msg(msgText);
 };

 uploadifyOnSelect = function () {
 };
 uploadifyOnUploadSuccess = function (file, data, response) {
  layer.msg(file.name + "\n\n" + response + "\n\n" + data);
 };
 $(function () {

  $("#uploadify").uploadify({
   uploader: '/PageBase/UploadifyFun', //處理上傳的方法
   swf: '/Scripts/lib/uploadify/uploadify.swf',
   width: 80, // 按鈕寬度
   height: 60, //按鈕高度
   buttonText: "上傳文件",
   buttonCursor: 'hand',
   fileSizeLimit:20480,
   fileobjName: 'Filedata',
   fileTypeExts: '*.xlsx;*.docx', //擴(kuò)展名
   fileTypeDesc: "請選擇xslx,docx文件", //文件說明
   auto: false, //是否自動上傳
   multi: true, //是否一次可以選中多個(gè)文件
   queueSizeLimit: 5, //允許同時(shí)上傳文件的個(gè)數(shù)
   overrideEvents: ['onSelectError', 'onDialogClose'], // 是否要默認(rèn)提示 要就不配置
   onSelect: uploadifyOnSelect,
   onSelectError: uploadifyOnSelectError,
   onUploadError: uploadifyOnUploadError,
   onUploadSuccess: uploadifyOnUploadSuccess
  });
 });
</script>
<span id="uploadify"></span>
<div>
 <a href="javascript:$('#uploadify').uploadify('upload','*');">上傳</a>
 <a href="javascript:$('#uploadify').uploadify('cancel', '*');">取消</a>
</div>

注：fileSizeLimit 屬性的值最好和我們web.config 里設(shè)置的文件上傳最大值一樣（不能大于這個(gè)值）

到這里。我們文件上傳就結(jié)束了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: