나는 최근에 아끼지 않았다. Bootstrap FileInput 구성 요소의 일반적인 사용을 요약했습니다. 귀하의 참조를 위해 Wulin Network 플랫폼과 공유 할 것이며 향후 검색에도 편리합니다. 이 기사의 글쓰기 가난한 것에 대해 저를 용서 해주세요.
1. 효과 디스플레이
1. 원래 입력 유형 = '파일'은 참을 수 없습니다.
2. 장식이없는 부트 스트랩 FileInput : (부트 스트랩 FileInput의 1 차 진화)
3. Bootstrap FileInput의 고급 진화 : 중국 문화, 드래그 앤 드롭 업로드, 파일 확장 검증 (파일이 필요하지 않은 경우 업로드되지 않음)
드래그 앤 드롭 업로드
업로드
4. Bootstrap FileInput Ultimate Evolution : 여러 스레드로 여러 파일을 동시에 업로드 할 수 있습니다.
업로드
업로드가 완료된 후
2. 코드 예제
어때? 얼마나 효과적입니까? 걱정하지 마십시오. 위의 결과를 단계별로 달성 할 것입니다.
1. CSHTML 페이지
먼저 필요한 JS 및 CSS 파일을 소개하십시오.
// bootstrap fileInputBundles.add (new scriptBundle ( "~/content/bootstrap-fileinput/js"). 포함 ( "~/content/bootstrap-fileinput/js/fileInput.min.js", "~/content/bootstrap-fileinput/js/fileInput_locale_zh.js"); StyleBundle ( "~/content/bootstrap-fileinput/css"). 포함 ( "~/content/bootstrap-fileinput/css/fileInput.min.css");@scripts.render ( "~/content/bootstrap-fileinput/js")@Styles.render ( "~/contents/bootstrap-fileppeppeppeppeppeppeppeppeppeppeppeppeppeppeppeppeppepper/css").
그런 다음 입력 유형 = '파일'태그를 정의하십시오
<form> <div id = "myModal"tabindex = "-1"role = "대화"aria-labelledby = "myModallabel"> <div role = "Document"> <div> <div> <버튼 유형 = "버튼"data-dismiss = "modal"aria-label = "close"> aria-hidden = "true"> </span> </span> </span> </span> id = "myModallabel"> Excel 파일을 선택하십시오 </h4> </div> <div> <a href = "~/data/exceltemplate/order.xlsx"style = "border : none;"> import template 다운로드 </a> <입력 유형 = "file"name = "txt_file"id = "txt_file"multupord/>
이 문장에 중점을 둡니다.
<입력 유형 = "파일"이름 = "txt_file"id = "txt_file"다중 />
다중 파일은 여러 파일을 동시에 업로드 할 수 있고 클래스 = "파일로드"는 태그 스타일을 의미합니다.
2. JS 초기화
$ (function () {// 0. fileInputVar ofileInput = new FileInput (); ofileInput.init ( "txt_file", "/api/orderApi/importOrder");}); // fileInputvar fileInput = function () {varile = new Object (); // initialize (first initialization) uploadurl) {var control = $ ( '#' + ctrlname); // 업로드 컨트롤 스타일을 초기화합니다. showcaption : // 제목 브라우저 브라우저 클래스 : "btn btn-primary", // 버튼 스타일 // dropzoneenabled : // 드래그 영역을 수행합니다. // minimagewidth : 50, // 그림의 최소값 : 50, // maximagewidth : // maximagewidth : // maximagewidth : // maximagewidth : // 그림 // maximageHeight : // 그림의 최대 높이 // maxFilesize : 0, // 단위는 0이라면, 파일 크기가 제한되지 않음을 의미합니다. true, previewfileicon : "<i class = 'glyphicon glyphicon-king'> </i>", msgfilestoomany : "업로드 된 파일의 수를 선택합니다 ({n})은 최대 허용 값 {m}!"), // 이벤트를 가져온 후 $ ( "#txt_file". data, previewid, index) {$ ( "#mymodal"). modal ( "hide"); var data = data.response.lstortimport; if (data == undefined) {toast.error ( '파일 형식 유형이 잘못되었습니다');} // 1 tableInit (); otable.init (data); $ ( "#div_startimport"). show ();});} return ofile;};설명 :
(1) FileInput () 메소드는 많은 속성을 갖는 JSON 데이터로 전달됩니다. 각 속성은 업로드 제어를 초기화 할 때 특성을 나타냅니다. 이러한 속성 중 어느 것도 설정되지 않으면 기본 설정이 사용됨을 의미합니다. 내부에 어떤 속성이 있는지 확인하려면 끝에 표시된대로 FileInput.js의 소스 코드를 열 수 있습니다.
이러한 속성이 구체적으로 설정되지 않으면 기본값이 사용됩니다.
(2) $ ( "#txt_file"). on ( "fileUploaded", function (이벤트, 데이터, 미리보기, 색인) {}이 메소드는 업로드 후 콜백 이벤트를 등록합니다. 즉, 처리 후 하루에 업로드 된 파일을 처리 한 후 처리 방법으로 들어갑니다.
3. 배경 C#에 해당하는 방법
JS의 초기화 제어 메소드 FileInput ()에 매개 변수 URL이 있다는 것을 기억하십니까? 이 URL의 해당 값은 하루 후 C#의 해당 처리 방법을 나타냅니다. 또는 백그라운드 처리 방법을 게시하십시오.
[actionName ( "importOrder")] public object importOrder () {var of ofile = httpcontext.current.request.files [ "txt_file"]; var lstordeMport = 새 목록 <dto_to_order_import> ();#great 0.data reparation var lstexistorder = ordermanager.find (); x.order_no (); var lsttmmodel = modelmanager.find (); var lsttmmaterial = materialmanager.find (); // var imax_import_index = lstexistorder.max (x => x => X.Import_Index = inimax_import_import_inull? 0 : imax_import_index.value;#endregion#region 1. 스트림 iWorkBook Wortbook = null; if (ofile.filename.endswith ( ". xls")) {workbook = new hssfworkbook (ofile.inputstream); xssfworkbook (ofile.inputStream);} if (workbook == null) {return new {};} // ............ Excel logic //orderManager.add(lstorder); lstorderImport = lstorderImport.orderby (x => x.import_statu); returnort {lstormport}.블로거의 프로젝트는 Excel을 업로드하는 것이므로 NPOI 논리가 여기에서 사용됩니다. 사진 및 기타 파일을 업로드하면 GDI를 사용하여 그림을 처리 할 수 있습니다.
4. 여러 파일을 동시에 업로드하십시오
여러 파일이 동시에 업로드되면 프론트 데스크는 여러 비동기 요청을 배경으로 보냅니다. 즉, 3 개의 파일이 동시에 업로드되면 백그라운드의 Importorder 메소드가 세 번 입력됩니다. 이를 통해 여러 스레드를 사용하여 3 개의 파일을 동시에 처리 할 수 있습니다.
3. 요약
Bootstrap FileInput의 기본 사용이 대략 소개됩니다. 실제로 업로드 된 구성 요소이며 고급 사용량이 없습니다. 핵심은 인터페이스를보다 친절하고 사용자 경험을 향상시키는 것입니다.
Bootstrap FileInput 파일 업로드 컴포넌트의 사용법에 대해 여러분에게 많이 소개하겠습니다. 나는 그것이 당신에게 도움이되기를 바랍니다!