최근에 저는 제 개인 웹 사이트 인 프론트 엔드에 사용되는 부트 스트랩 프레임 워크를 작성하고 있습니다. 그림의 업로드 기능을 달성하면 인터넷에서 부트 스트랩 기반 이미지 업로드 프레임 워크 파일 입력 플러그인을 찾았습니다. 이 플러그인은 내 미학적보기와 매우 일치 하므로이 플러그인의 사용을 간략하게 기록하겠습니다.
먼저 프로젝트 경로에 따라 플러그인 CSS 및 JS 파일을 소개합니다.
Locale 언어 파일은 fileInput.min.js 파일 후에 소개됩니다.
<!-파일 입력-> <link href = "../../ css/fileInput.min.css"rel = "stylesheet"> <script src = "../../ js/fileInput.min.js"> </script> <script src = "../ js/locales/zh.js"tepect/javascrip ">
그런 다음 전문 프론트 엔드가 아니기 때문에 HTML 코드가 있으므로 프론트 엔드 코드가 매우 나쁘고 가볍게 분출하고 히트합니다.
<!-모달 박스 (modal)-> <span style = "화이트 공간 : pre"> </span> <div id = "myModal"tabindex = "-1"role = "컨트롤"aria-labelledby = "myModallabel"aria-hidden = "true"> <span style = "white"</span <div> <span span span span span span span. 스타일 = "화이트 공간 : pre"> </span> <div> <span style = "흰색 공간 : pre"> </span> <div> <span style = "화이트 공간 : pre"> </span> <div> <span style = "white"> </span> <button type = "button"data-dismiss = "modal"aria-hidden = "true"> <span span span span span : preface : pre span. 스타일 = "화이트 공간 : pre"> </span> </button> <span style = "화이트 공간 : pre"> </span> <h3 id = "mymodallabel"align = "center"> <span style = "white"> </span <b> 추가 음악 점수 정보 </b> <span style = "white"> </span> <span style : pre ">"> </span> </div> <span style = "white space : pre"> </span> <div> <span style = "화이트 공간 : pre"> </span> <form id = "addform"role = "form"enctarpe = "multipart/form-data"> <span style = "white space : pre"> </span> <div> <스팬 스타일 = "white span : pre"> 스타일 = "화이트 공간 : pre"> </span> <span style = "화이트 공간 : pre"> </span> <input type = "text"id = "scoreName"name = "scoreName"placeHolder = ""> <span style = "white-space : pre"> </span> </div> <span style = "white-space : pre"> <div style = "> <스팬 스타일 = "화이트 공간 : pre"> </span> <span style = "화이트 공간 : pre"> </span> <span> span span </span> <span style = "흰색 공간 : pre"> </span> <span style = "white"> </span span style = "white-space : pre"> </span span style = "white space : pre"> </span> ""> </span> <span style = "white"> </span> <span style = "white space : pre"> </span> </div> <span Style = "화이트 공간 : pre"> </span <span style = "pre"> </span <span style = "white space : pre"> </span> <div style = "디스플레이 : Inline-table; 90px; "> <span style ="white space : pre "> </span> <span style ="화이트 공간 : pre "> </span> <span style ="흰색 공간 : pre "> </span spare> <span style ="pre "> </span> <입력 유형 ="text "id ="defficentinty "name ="devident "> <span span spase :"</span> < "> </span"> pre pre. "화이트 공간 : pre"> </span> </div> <span style = "화이트 공간 : pre"> </span> <div style = "margin-top : 10px;"> <span style = "흰색 공간 : pre"> </span> <스팬 스타일 = "화이트 공간 : pre"> </span> <span style = "white"> <pre "> span> 스타일 = "white"> </span> <input type = "텍스트"Id = "tune"name = "tune"> <span style = "화이트 스페이스 : pre"> </span> </div> <span style = "white"> </span> <span style = "white space : pre"> </space> <입력 id = "파일" "파일"/>>>>>>>>. </span> </div> <span style = "white space : pre"> </span> </form> <span style = "흰색 공간 : pre"> </span> </div> </div> <span style = "흰색 공간 : pre"> </div> <스팬 스타일 = "화이트 공간 : pre"> </span> <div> <화이트 스페이스 : Pre "> data-dismiss = "modal"> Close <span style = "white-space : pre"> </span> </button> <span style = "white-space : pre"> </span> </</span> <!-<span style = "white"> </span> <!-<span style = "white"> </span> </div> <스팬 스타일 = "화이트 스페이스 : pre"> </span> </span> <! /.modal-content-> <span style = "white-space : pre"> </span> </div> <!-/.modal-> <span style = "화이트 공간 : pre"> </span> </div>
그런 다음 JS 코드는 파일 입력을 초기화합니다
// fileInput Control (첫 번째 초기화) 함수 initFileInput (ctrlName, uploadUrl) {var control = $ ( '#' + ctrlname); Control.fileInput ({language : 'zh', // 언어 UPLOADURL : UPLOADURL, // 업로드 주소 허용 파일 XTENSIONS : [ 'jpg', 'png', 'gif'], // 수신 된 파일 접미사 showuupload : true, // upload button showcaption : false, browser browserclass를 수행합니다. // 버튼 스타일의 미리 파일 릭은 : "<i class = 'glyphicon glyphicon-king'> </i>", uploadasync : function (previewid, index) {var obj = {{addt ( 'input') $ (this) .val (); } // fileInput initFileInput 초기화 ( "파일 업", http : // localhost : 8080/web/guita/addguitainfo.action);이 코드는 플러그인의 핵심입니다
UploadUrl은 배경에 의해 제공되는 액세스 경로입니다
이것은 여기 특별 단락입니다
Uploadextradata : function (previewid, index) {var obj = {}; $ ( '#addform'). find ( 'input'). 각 (function () {var id = $ (this) .attr ( 'id'), val = $ (this) .val (); obj [id] = val;}); 반환 obj; }이 코드 uploadextradata는 다른 입력 상자 데이터에 대한 양식 양식을 제출하는 데 사용할 수있는 추가 매개 변수를 전달하는 데 적합합니다.
uploadextradata : {유형 : "유형", 튜닝 : "tune"}}일반적으로 정적 데이터는 위 그림과 같이 직접 수신 할 수 있습니다. 그러나 이렇게 쓰면 동적 데이터를 얻지 못할 것입니다. 데이터는 초기화 중에 한 번만 생성되며 변경되지 않습니다.
나는이 문제에 대해 많은 시간 동안 혼란 스러웠다. 마지막으로, 나는 Git에서 외국인 친구들의 토론을 읽은 다음 API를 참조하여 그것을 해결합니다.
이것을 작성한 후 렌더링을 볼 수 있습니다
스타일은 여전히 매우 좋습니다. 업로드하려면 클릭하면 전체 데이터가 배경에 제출됩니다.
온라인에서 찾은 많은 플러그인 응용 프로그램은 PHP와 통합되어 있습니다. 나는 그것을 Java로 썼다. 여기서 나는 또한 백그라운드에서받은 코드로 갔다. SpringMVC 프레임 워크는 데이터를 수신하기에 매우 편리합니다.
이러한 방식으로 데이터 매개 변수와 이미지 매개 변수가 전달되고 이미지를 저장하기 위해 파일로 업로드 한 코드를 통화합니다.
이 플러그인을 위해 공부할 가치가있는 많은 사용법이 있습니다. 여기서는 사용 방법에 대해 간단히 이야기하고 동적 데이터의 전송을 완료합니다. 이 플러그인에 방금 연락 한 친구는 간단한 참조를 할 수 있습니다.
파일 입력 플러그인을 사용하여 Bootstrap의 이미지를 업로드하는 방법에 대해 너무 많이 소개했습니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!