부트 스트랩을 직접 사용하고 간단한 JS 컨트롤을 사용하십시오
http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
매우 간단하게 코드는 다음과 같습니다.
<입력 id = "lefile"type = "file"style = "display : none"> <div> <input id = "photocover"type = "text"style = "height : 30px;"> <a onclick = "$ ( 'input [id = lefile]'). click ();"> ">"> ">"> "text/javascript"> $ ( 'input [id = lefile]'). Change (function () {$ ( '#photocover'). val ($ (this) .val ());}); </스크립트>효과는 다음과 같습니다.
다른 JS와 CSS가 필요하지 않으며 Bootstrap과 JQuery를 소개하십시오.
실제로, 이것은 스 플라이싱 된 다음 JS는 파일 이름의 표시를 제어합니다.
효과는 다음과 같습니다.
두 부트 스트랩 필루 스타일
http://markusslima.github.io/bootstrap-filestyle/
참고 :이 스타일은 Bootstrap2의 CSS 만 사용할 수 있으며 Bootstrap3의 CSS 버전은 호환되지 않습니다! ! (젠장, 나는 이것을 오랫동안 테스트 해왔다 ..
효과는 다음과 같습니다.
3 개의 부트 스트랩 파일 입력
http://www.gregpike.net/demos/bootstrap-file- 입력/demo.html
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css"rel = "stylesheet"/> <cript type = "text/javaScript" src = "js/jquery-2.0.3.min.js"> </script> <script type = "text/javaScript"src = "js/bootstrap.min.js"> </script> src = "js/bootstap.file-input.js"> type = "file"> <br> <br> <input type = "file"> <br> <br> <br> <br> <br> <input type = "file"> <br> <br> <input type = "file"> <br> <br> <br> <br> <br> <br> 스타일링을 비활성화합니다 : <input type ""pute the Styling>. type = "text/javaScript"> $ ( 'input [type = file]'). bootstrapfileInput (); </script> </body> </html>
bootstrap.file-input.js가 소개되었지만 bootstrapfileinput 방법을 찾을 수 없다고 말하면서 직접 소개하는 데 약간의 문제가있었습니다. 그래서 나는 약간의 JS를 변경했습니다.
/* 부트 스트랩 - 파일 input ================================ 모든 파일 입력 태그를 모든 브라우저에서 일관되게 표시하는 일련의 요소로 변환하는 것입니다. 모든 <입력 유형 = "파일">을 부트 스트랩 버튼으로 변환 <a> 브라우즈 </a> */ $ .fn.bootstrapileInput = function () {여기서이 메소드를 직접 사용하고 이전 줄을 삭제합니다. csshtml = '<style>'+ '. 왼쪽;좋아, 이제 효과를 볼 시간 ~~
4 개의 고급 업 로더
http://fineuploader.com/demos.html
공식 웹 사이트에서 다운로드하는 것은 수수료입니다. . Github에서 하나를 다운로드했습니다.
링크 다운로드
다운로드 및 압축 압축 후 : 다음과 같습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> bootstrap.file-input </title> <link href = "css/bootstrap.min.css"rel = "stylesheet"/> <intry href = "styl href ="css/uploader. /> <script type = "text/javaScript"src = "js/jquery-2.3.3.min.js"> </script> <script type = "text/javascript"src = "js/all.fineuploader-4.3.1.min.js"> </head> <br> <br> id = "manual-fine-uploader"> </div> <div id = "triggerupload"style = "margin-top : 10px;"> <i> </i> 지금 업로드 </div> <cript> $ (document) .ready () {var manualuploader = $ ( '#manual-fine-uploader'). 'Server/HandleUploads'}, autoUpload : false : {uploadbutton : '<i> </i>'}}); </script> <cript> $ (document) .ready (function () {$ ( '#fine-uploader'). fineuploader ({request : {endpoint : 'server/handleUploads'}});}); </script> <!-미세 업 로더 CSS ================================================================================= =============================================================================================================== =============================================================================================================== ========================================================================================================================= ===================================================================================================================================== =============================================================================================================== 유형 = "text/템플릿"id = "qq-template"> <div> <div qq-hide-dropzone> <span> 파일을 여기에서 삭제하기 위해 파일을 삭제합니다. <span> </span> </span> </span> </span> <입력 tabindex = "0"type = "text"> <span> </span> <a href = "#"> 취소 </a> <a href = "#"> retry </a> <a href = "#"> delete </a> </li> </li> </li> </li> </body> </html>JS 및 CSS는 폴더에서 검색하여 찾을 수 있지만 All.fineUploader-4.3.1.min.js가 있습니다. . 테스트 후 사용할 수 있습니다
중간 코드에서 템플릿에주의하십시오
이 섹션을 사용할 수 없으면 콘솔에 오류가 발생합니다.
그런 다음 이유를 찾았습니다.
읽을 수 있습니다. 즉, 실행할 템플릿 파일이 있어야합니다.
효과는 다음과 같습니다. (CSS에 해당하는 그림은 약간 추악합니다)
위의 내용은 편집기가 소개 한 부트 스트랩 파일 업로드 스타일과 관련이 있습니다. 나는 그것이 모두에게 도움이되기를 바랍니다!