부트 스트랩 파일 업로드 플러그인 파일 입력은 좋은 파일 업로드 컨트롤이지만 검색 및 사용에 대한 사례는 많지 않습니다. 그것을 사용할 때, 당신은 또한 돌을 단계별로 닿아 강을 건 cross습니다. 이 컨트롤은 인터페이스에 표시되며 이전에 사용한 업로드는 더 아름답고 강력한 기능을 가지고 있습니다. 이 기사는 주로 내 자신의 프레임 워크 코드 케이스를 기반으로하며 파일 입력, 파일 업로드 플러그인 사용을 소개합니다.
1. 파일 업로드 플러그인의 파일 입력 소개
이 플러그인의 홈페이지 주소는 http://plugins.krajee.com/file-input입니다. 여기에서 http://plugins.krajee.com/file-basic-usage-demo를 많이 볼 수 있습니다.
이는 강화 된 HTML5 파일 입력 컨트롤, 부트 스트랩 3.X의 확장, 파일 업로드 미리보기, 멀티 파일 업로드 및 기타 기능을 구현합니다.
일반적으로 플러그인을 정상적으로 사용하려면 다음 두 파일을 소개해야합니다.
Bootstrap-fileInput/css/fileInput.min.css
Bootstrap-fileInput/js/fileInput.min.js
간단한 인터페이스 효과는 다음과 같습니다. 많은 업로드 파일 컨트롤과 마찬가지로 다양한 유형의 파일을 허용 할 수 있습니다. 물론, 우리는 특정 파일 유형 및 허용되는 기타 기능을 지정할 수도 있습니다.
중국 문화를 고려해야한다면 문서를 소개해야합니다.
Bootstrap-FileInput/JS/FileInput_locale_zh.js
이러한 방식으로 MVC의 번들 컬렉션을 기반으로 컬렉션에 필요한 파일을 추가 할 수 있습니다.
// 부트 스트랩-파일 푸트 컨트롤 css_meteronic.include에 대한 지원 추가 ( "~/content/myplugins/bootstrap-fileinput/css/fileinput.min.css"); js_meteronic.include ( "~/content/myplugins/bootstrap-fileinput/js/fileinput.min.js"); js_meteronic.include ( "~/content/myplugins/bootstrap-fileinput/js/fileInput_locale_zh.js"); js_meteronic.include ( "~/content/myplugins/bootstrap-fileinput/js/fileInput_locale_zh.js");
이런 식으로, 우리는 다음 인터페이스에 표시된 것처럼 중국 인터페이스 설명과 프롬프트를 페이지에 제시 할 수 있습니다.
2. 파일 업로드에 파일 입력 사용
일반적으로 다음 JS 기능 코드와 같이이 플러그인 컨트롤을 초기화하기 위해 일반 JS 함수를 정의 할 수 있습니다.
// fileInput Control (첫 번째 초기화) 함수 initFileInput (ctrlName, uploadUrl) {var control = $ ( '#' + ctrlname); control.fileInput ({anceploppl : // uploadUrl, // uploaded 주소 허용 파일 XTENSINS : [ 'jpg', 'png', 'gif'], // 수신 된 파일 접미사 showuupload : false, // upload button showcaption : // 수행 제목 브라우저 브라우저 브라우저 브라우저 브라우저 "," // 버튼 스타일 previewfileicon : "<i class = 'Glyphicon Glyphicon-King'> </i>",});}페이지 코드에 다음 코드와 같이 파일 업로드 컨트롤을 배치합니다.
<div style = "height : 500px"> <input id = "file-portrait1"type = "file"> </div>
이러한 방식으로 스크립트 코드의 초기화 코드는 다음과 같습니다.
// FileInput Control을 초기화 (첫 번째 초기화) InitFileInput ( "File-Portrait", "/user/editportrait");
이것은 컨트롤의 초기화를 완료합니다. 파일을 업로드 해야하는 경우 클라이언트가 업로드 한 이벤트를 처리하려면 JS 코드가 필요하며 파일 저장 작업을 처리하려면 MVC 배경 컨트롤러가 필요합니다.
예를 들어, 양식 데이터 저장을위한 내 코드는 다음과 같습니다.
// 레코드 추가 formvalidate ( "ffadd", function (form) {$ ( "#add"). modal ( "hide"); // 배경으로 구성 매개 변수를 배경으로 var var var var var var var var var var var data = $ ( "#ffadd")로 보내십시오. $ .post (url, postdata, function (json) {json); if (json); if (json); {// initportrait를 추가하십시오. (Data.Data1). }). error (function () {showtips ( "이 함수를 사용하는 것이 권한이 없으므로 관리자에게 연락하여 처리하십시오.");}); });그중에서도 파일 저장의 처리 로직 코드 부분을 알았습니다.
// 초상화 initportrait (data.data1)의 업로드 처리를 추가합니다. // writed id를 사용하여 $ ( '#file-portrait'). fileInput ( 'upload');
첫 번째 코드 라인은 사용자의 ID 정보와 같은 업로드 된 추가 컨텐츠를 재구성하여 배경에 대한 업로드 및 처리를위한 이러한 ID를 기반으로 일부 추가 데이터를 구축 할 수 있도록하는 것입니다.
이 기능은 주로 업로드 할 때 최신 추가 매개 변수의 획득을 용이하게하기 위해 ID를 재 할당합니다. 이것은 업로드 프로세싱 모드와 동일합니다.
// 이미지 정보 기능 초기화 initportrait (ctrlname, id) {var control = $ ( '#' + ctrlname); var imageUrl = '/picturealbum/getportrait? id =' + id + '& r =' + math.random (); //Important, it is necessary to update the additional parameter content of the control, and the image initialization display control.fileinput('refresh', { uploadExtraData: { id: id }, initialPreview: [ //Preview the image settings "<img src='" + imageurl + "' class='file-preview-image' alt='Portrait picture' title='Portrait Picture'>", ], }); }앞에서 보았 듯이 업로드 한 주소는 "/user/editportrait"입니다. 또한이 배경 기능을 발표하여 배울 수있는 완전한 사례 코드를 제공하기를 바랍니다.
/// <summary> /// 사용자 아바타 이미지 업로드 /// </summary> /// <param name = "id"> 사용자의 id </param> /// <returns> </returns> public actionResult editportrait (int id) {commonresult result = new CommonResult (); {var files = request.files; if (files! = null && files.count> 0) {userInfo info = bllfactory <user> .instance.findbyid (id); if (info! = null) {var filedata = readfilebytes (파일 [0]); result.success = bllfactory <user> .instance.updatePersonImageBytes (userimagetype.personportrait, id, filedata); }}} catch (Exception Ex) {result.errormessage = ex.message; } return tojsonContent (결과); }이러한 방식으로 위의 사용자 초상화 저장 및 처리 로직을 구축했으며 파일을 배경 파일 시스템에 정상적으로 저장할 수 있으며 동시에 필요한 정보가 데이터베이스에 기록됩니다.
물론,이를 사용하여 사용자 초상화 사진을 처리하는 것 외에도 이미지 앨범 처리 작업을 구축 할 수도 있습니다. 특정 인터페이스는 다음과 같습니다.
이 부분의 초기화 코드는 다음과 같습니다.
// fileInput Control (첫 번째 초기화) $ ( '##file-portrait'). fileInput ({anceplopload/upload ", // upload avensefileextensions : [ 'jpg', 'png', 'gif'], // 수신 된 파일, maxfilelecount : 100, 100, 100, 'multipart/form-data', showupload : true, // 업로드 버튼 showcaption : false, // 제목 브라우저 브라우저 클래스 : "btn btn-primary", // 버튼 스타일 previewfileicon : "<i class ="glyphicon glyphicon-king '> </i> " ({n})은 허용되는 최대 값 {m}! ",})를 초과합니다.위의 것은 편집기가 소개 한 부트 스트랩 메트로닉 개발 프레임 워크의 경험에 대한 자세한 설명입니다. [5] 부트 스트랩 파일 입력 파일 업로드 플러그인의 사용에 대해 자세히 설명합니다. 모든 사람에게 도움이되기를 바랍니다. 더 많은 정보를 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!