bootstrap fileinput 업로드 플러그인의 기본 사용

서론：

이전의 세 편에서는 bootstrap table의 일반적인 사용법을 소개했고,博主는 이 평평한 스타일에 대해 매우 관심을 가지고 있다.前几天做一个excel导入的功能，前端使用原始的input type='file'这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，博主终于找到了这个组件：bootstrap fileinput。关于这个组件的简单应用，基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input 파일 업로드 플러그인의 사용법 설명，하지만 많은 세부 사항은 다루어지지 않았기 때문에，博主는 개발 작업을 완료한 후에도 이 컴포넌트의 일반적인 사용법을 요약했다. 이를 기록하면, 기록을 남기는 것처럼 되고, 필요한 사람들에게 편리함을 제공할 것이다。

소스 코드 및 API 주소:

bootstrap-fileinput 소스 코드:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput 온라인 API:http://plugins.krajee.com/file-input

bootstrap-fileinput Demo 시연:http://plugins.krajee.com/file-basic-usage-demo

1、효과 시연

　1、원래의 input type='file'는 보기에도 싫습니다.

2、미술을 추가하지 않은 bootstrap fileinput：(bootstrap fileinput 기본 진화)

3、bootstrap fileinput 고급 진화: 중국어화, 드래그 앤 드롭 업로드, 파일 확장자 검증(필요한 파일이 아닌 경우 업로드 금지)

드래그 앤 드롭 업로드

업로드 중

4、bootstrap fileinput 최종 진화: 여러 파일을 동시에 멀티스레드로 업로드할 수 있습니다.

업로드 중

업로드가 완료되면

2、코드 예제

　어떻게요? 효과는 어떤지요? 불안해하지 마세요, 우리는 단계별로 이러한 효과를 구현합니다.

1、cshtml 페이지

처음에 필요한 js와 css 파일을 포함합니다.

//bootstrap fileinput 
 bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include( 
    "~/Content/bootstrap-fileinput/js/fileinput.min.js", 
    "~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js")); 
 bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include( 
    "~/Content/bootstrap-fileinput/css/fileinput.min.css"); 
@Scripts.Render("~/Content/bootstrap-fileinput/js") 
@Styles.Render("~/Content/bootstrap-fileinput/css") 

그런 다음 input type='file' 태그를 정의합니다

<form> 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog modal-lg" role="document"> 
   <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">Excel 파일 선택하세요</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/데이터/ExcelTemplate/Order.xlsx" rel="external nofollow" class="form-control" style="border:none;">다운로드 모델</a> 
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 
    </div></div> 
  </div> 
 </div> 
</form>

이 문장을 주목하세요:

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 

multiple은 여러 개의 파일을 동시에 업로드할 수 있음을 나타냅니다. class=“file-loading”은 태그 스타일을 나타냅니다. 여기서 매우 중요합니다. class="file"이면 중국어 번역이 적용되지 않습니다.

2、js 초기화

$(function () { 
 //0. fileinput 초기화 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//fileinput 초기화 
var FileInput = function () { 
 var oFile = new Object(); 
 //fileinput 컨트롤러 초기화（처음 초기화） 
 oFile.Init = function(ctrlName, uploadUrl) { 
 var control = $('#' + ctrlName); 
 //업로드 컨트롤러 스타일 초기화 
 control.fileinput({ 
  language: 'zh', //언어 설정 
  uploadUrl: uploadUrl, //업로드 주소 
  allowedFileExtensions: ['jpg', 'gif', 'png'],//받을 파일 확장자 
  showUpload: true, //업로드 버튼을 표시할지 여부 
  showCaption: false,//제목을 표시할지 여부 
  browseClass: "btn btn-primary", //버튼 스타일  
  //dropZoneEnabled: false,//끌어다루기 영역을 표시할지 여부 
  //minImageWidth: 50, //이미지의 최소 너비 
  //minImageHeight: 50,//이미지의 최소 높이 
  //maxImageWidth: 1000,//이미지의 최대 너비 
  //maxImageHeight: 1000,//이미지의 최대 높이 
  //maxFileSize: 0,//단위는 kb입니다. 0이면 파일 크기를 제한하지 않습니다 
  //minFileCount: 0, 
  maxFileCount: 10, //표시는 동시에 업로드할 수 있는 최대 파일 수를 의미합니다 
  enctype: 'multipart/form-data', 
  validateInitialCount:true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" 
  msgFilesTooMany: "선택한 업로드 파일 수({n})이 허용 가능한 최대 값{m}를 초과했습니다! ", 
 }); 
 //파일导入 업로드가 완료된 후의 이벤트 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('파일 형식 타입이 올바르지 않습니다.'); 
   return; 
  return new { lstOrderImport = lstOrderImport }; 
  //1.테이블 초기화 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
return new { lstOrderImport = lstOrderImport }; 
 return oFile; 
}; 

설명:

（1fileinput() 메서드에 전달되는 것은 json 데이터로, 여러 속성이 있으며 각 속성은 업로드 컨트롤러를 초기화할 때의 특성을 나타냅니다. 이러한 속성들이 모두 설정되지 않으면 기본 설정을 사용하는 것을 의미합니다. 만약 그 안에 있는 속성들을 확인하고 싶다면 fileinput.js의 소스 코드를 열고 마지막 부분을 확인할 수 있습니다. 그림과 같이:

这些属性如果不特意设置，就会使用默认值。

（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后台处理上传的文件之后进入这个方法里面处理。

3、后台C#对应的方法

　还记得在js里面初始化控件方法fileinput()里面有一个参数url吗，这个url对应的值就指示C#后台对应的处理方法。还是贴出后台的处理方法。

[ActionName("ImportOrder")] 
 public object ImportOrder() 
 if (workbook == null) 
  var oFile = HttpContext.Current.Request.Files["txt_file"]; 
  var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); 
  #region 0.数据准备 
  var lstExistOrder = orderManager.Find(); 
  var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList(); 
  var lstTmModel = modelManager.Find(); 
  var lstTmMaterial = materialManager.Find(); 
  //var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX); 
  //iMax_Import_Index = iMax_Import_Index == null ?63; 0 : iMax_Import_Index.Value; 
  #endregion 
  #region 1通过Stream获取Workbook对象 
  IWorkbook workbook = null; 
  if (oFile.FileName.EndsWith(".xls")) 
  if (workbook == null) 
   workbook = new HSSFWorkbook(oFile.InputStream); 
  return new { lstOrderImport = lstOrderImport }; 
  else if(oFile.FileName.EndsWith(".xlsx")) 
  if (workbook == null) 
   workbook = new XSSFWorkbook(oFile.InputStream); 
  return new { lstOrderImport = lstOrderImport }; 
  workbook = new XSSFWorkbook(oFile.InputStream); 
  if (workbook == null) 
   { 
  return new { lstOrderImport = lstOrderImport }; 
  //return new { }; 
  //............... 엑셀 처리 로직 
  orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
 return new { lstOrderImport = lstOrderImport }; 

}

4저자의 프로젝트가 엑셀을 업로드하므로, 여기서는 NPOI 로직을 사용하고 있습니다. 이미지 등의 파일을 업로드할 때는 GDI를 사용하여 이미지를 처리할 수 있습니다.

여러 개의 파일을 동시에 업로드

여러 개의 파일을 동시에 업로드할 때, 프론트엔드는 여러 개의 비동기 요청을 백엔드로 보냅니다. 즉, 세 개의 파일을 동시에 업로드할 때, 백엔드의 ImportOrder 메서드가 세 번 들어갑니다. 이렇게 하면 세 개의 파일을 동시에 다루기 위해 멀티스레드를 사용할 수 있습니다.

3. 요약

안내: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 웹사이트는 소유권을 가지지 않으며, 인공적인 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으시면, 이메일로 notice#w에 보내 주시기 바랍니다.3codebox.com에 이메일을 보내면 (#을 @으로 변경해 주세요) 신고하시고 관련 증거를 제공해 주시면, 사이트가 저작권 위반 내용을 즉시 삭제할 것입니다.