ASP.NET MVC Webuploader 업로드 기능 구현

본 논문 의 사례 는 안 드 로 이 드 구 궁 격 사진 전시 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.소개:WebUploader 는 Baidu WebFE(FEX)팀 이 개발 한 간단 한 HTML 5 위주,FLASH 를 보조 로 하 는 현대 파일 업로드 구성 요소 입 니 다.현대 의 브 라 우 저 에서 HTML 5 의 장점 을 충분히 발휘 할 수 있 을 뿐만 아니 라 주류 IE 브 라 우 저 를 버 리 지 않 고 원래 의 FLASH 가 실 행 될 때 IE6+,iOS 6+,android 4+를 호 환 할 수 있다.두 세트 가 실 행 될 때 같은 호출 방식 은 사용자 가 임의로 선택 할 수 있다.
2.자원 도입:웹 Uploader 파일 로 업로드 하려 면 JS,CSS,SWF 세 가지 자원 을 도입 해 야 합 니 다.

<!--  CSS-->
<link rel="stylesheet" type="text/css" href="webuploader   /webuploader.css">
<!--  JS-->
<script type="text/javascript" src="webuploader   /webuploader.js"></script>

<!--SWF         ，      -->

3.HTML 부분

<div id="uploader" class="wu-example">
 <!--        -->
  <ul id="thelist" class="list-group"></ul>
  <div class="uploader-list"></div>
  <div class="btns">
  <div id="picker" style="float:left;">    </div>
  <input id="ctlBtn" type="button" value="    " class="btn btn-default" style="width:78px;height:37px;margin-left:10px;" />
 </div>
</div>

4.JS 부분

//       
 function initUpload() {
  var $ = jQuery;
  var $list = $('#thelist');
  var uploader = WebUploader.create({

   //      ，      。
   auto: false,
   // swf    
   swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf',

   //        。
   server: applicationPath + 'PublicInfoManage/Upload/Upload',

   //        。  。
   //            ，   input  ，    flash.
   pick: '#picker',

   chunked: true,//      
   chunkSize: 2048000,//      
   formData: {
    guid: GUID //     ，     
   },

   //    image,      jpeg，             ！
   resize: false
  });
  //              
  uploader.on('fileQueued', function (file) {
   $list.append('<li id="' + file.id + '" class="list-group-item">' +
    '<span class="fileName" dataValue="">' + file.name + '</span>' +
    '<span class="state" style=\" margin-left: 10px;\">    </span>' +
    '<span class="filepath" dataValue="0" style=\" margin-left: 10px;display: none;\"></span>' +
    '<span class="download" style="margin-left:20px;"></span>' +
    '<span class="webuploadDelbtn"style=\"float: right;display: none; \">  <span>' +
   '</li>');
  });
  //                 。
  uploader.on('uploadProgress', function (file, percentage) {
   var $li = $('#' + file.id),
  $percent = $li.find('.progress .progress-bar');

   //       
   if (!$percent.length) {
    $percent = $('<div class="progress progress-striped active">' +
     '<div class="progress-bar" role="progressbar" style="width: 0%">' +
     '</div>' +
    '</div>').appendTo($li).find('.progress-bar');
   }

   $li.find('span.state').text('   ');

   $percent.css('width', percentage * 100 + '%');

  });

  //       ， item    class,          。
  uploader.on('uploadSuccess', function (file, response) {
   var $li = $('#' + file.id);
   //$('#' + file.id).find('p.state').text('   ');
   $.post('../../PublicInfoManage/Upload/Merge', { guid: GUID, fileName: file.name }, function (data) {
    $li.find('span.state').html("    ");
    $li.find('span.filepath').attr("dataValue", 1);
    $li.find('span.fileName').attr("dataValue", data.filename);
    $li.find('span.fileName').html(data.filename);
    $li.find('span.download').html("<a href=\"../../PublicInfoManage/Upload/DownFile?filePath=" + data.filepath + "&amp;fileName=" + data.filename + "\">  </a>")
    $li.find('span.webuploadDelbtn').show();
    $li.find('span.filepath').html(data.filepath);
    //      
    files.push(data);
   });
  });

  //       ，      。
  uploader.on('uploadError', function (file, reason) {
   $('#' + file.id).find('p.state').text(reason);
  });

  //       ，      ，      。
  uploader.on('uploadComplete', function (file) {
   $('#' + file.id).find('.progress').fadeOut();
  });

  //        
  uploader.on("uploadFinished", function () {
   //    

  });
  //    
  $("#ctlBtn").click(function () {
   uploader.upload();

  });
  //  
  $list.on("click", ".webuploadDelbtn", function () {
   debugger
   var $ele = $(this);
   var id = $ele.parent().attr("id");
   var file = uploader.getFile(id);
   uploader.removeFile(file);
   $ele.parent().remove();
   //    
   var destFile = findFile(file.name)
   var index = files.indexOf(destFile);
   if (index > -1) {
    files.splice(index, 1);
   }
  });
 }

5.C\#컨트롤 러 백 엔 드 처리

/// <summary>
  ///     
  /// </summary>
  /// <returns></returns>
  [HttpPost]
  public ActionResult Upload()
  {
   string fileName = Request["name"];
   int lastIndex = fileName.LastIndexOf('.');
   string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf('.'));
   fileRelName = fileRelName.Replace("[", "").Replace("]", "").Replace("{", "").Replace("}", "").Replace(",", "");
   int index = Convert.ToInt32(Request["chunk"]);//      
   var guid = Request["guid"];//     GUID 
   var dir = Server.MapPath("~/Upload/file");//      
   string currentTime = DateTime.Now.ToString("yyyy-MM-dd");
   dir += "\\" + currentTime;
   dir = Path.Combine(dir, fileRelName);//         
   if (!System.IO.Directory.Exists(dir))
    System.IO.Directory.CreateDirectory(dir);
   string filePath = Path.Combine(dir, index.ToString());//         ，                ，          
   var data = Request.Files["file"];//         
   //if (data != null)// null          
   //{
   data.SaveAs(filePath);//  
   //}
   return Json(new { erron = 0 });//Demo，       ，    
  }

6.실현 효과

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.