*1. Bootstrap-FileInput Plug-In Git 다운로드 주소
https://github.com/kartik-v/bootstrap-fileinput.git
2. 반환 가치를 얻으려면 부트 스트랩 파일 푸트 사용을 해결하십시오.
사진 업로드
$ ( "#file-0a"). fileInput ({uploadUrl : "/upload_img", // 이미지를 업로드하기 위해 urlallowedfileextensions를 업로드했습니다 : [ 'jpg', 'png', 'gif'], 오버 라이니티얼 : false, maxfilesize : // uplight the maxfilesnum : 1, // 업로드. 파일 수 초기 커넥션 : "가맹점 로고를 업로드하십시오", // 초기 텍스트 상자 값 // 허용 문제 : [ 'image', 'video', 'flash'], slugcallback : function (filename) {return filename.replace ( ','_ '). 교체 ('] ','_ ');이미지 이벤트를 업로드 한 후 리턴 값 쓰기 방법을 가져옵니다.
$ ( '##file-0a'). on ( 'fileUploaded', function (event, data, previewid, index) {var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; console.log (응답); // retured jsonconsole.log를 인쇄); // 인쇄);JSP 페이지
<input id = "file-0a"type = "file"multipledata-min-file-count = "1"name = "upload_logo">
여기서 data-min-file-count =”1”은 업로드 된 최소 파일 수를 나타냅니다.
3. 서버 코드
Spring의 자체 플러그인을 사용하여 업로드하면 프레임 워크는 SpringMVC입니다.
콩
import java.util.list; public class picture {private list <string> 경로; 공개 목록 <string> getPaths () {return paths;} public void setpaths (list <string> 경로) {this.paths = paths;}}제어 장치
@responsebody@requestmapping (value = "upload_img", method = requestmethod.post) public picture uploadimage [@requestparam multipartfile [] upload_logo)는 ioexception {log.info ( "Upload Picture"); 그림 pic = new Picture (); list <string> paths = new arraylist> (); uploadutil.getfolder (); for (multipartfile myfile : upload_logo) {if (myfile.isempty ()) {log.info ( "업로드되지 않음"); } else {log.info ( "파일 길이 :" + myfile.getSize ()); log.info ( "파일 유형 :" + myfile.getContentType ()); log.info ( "파일 이름 :" + myfile.getName ()); log.info ( "파일 이름 :" + myfile.getoriginalfilename ()); log.info ( "========================================================================================================================================== =========================================================================================================================== =========================================================================================================================== ============================================================================================================= uploadutil.writefile (myfile.getoriginalfilename (), dir, myfile.getInputStream ()); log.info ( "파일 경로 :"+path); paths.add (path);}} pic.setpaths (pats); 반환 pic;}업로드
개인 정적 최종 로거 로그 = loggerFactory.getLogger (uploadUtil.class); private uploadUtil () {} private static simpledateformat fullsdf = new simpledateformat ( "yyyymmddhhhmmssss"); private static simpledateformat folder = new SimpledateFormat ( "yyyy" + file.separator + "mm" + file.separator + "dd");/*** yyyy file.separator mm file.separator dd string** @return*/public static string getpolder () {retain (); @param srcname* 원본 파일 이름* @param dirname* directory name* @param input* 입력 스트림 저장* @return 데이터베이스에 저장할 경로를 반환*/public static string writ tomcat의 server.xml string uploaddir = contextutil.getsysprop ( "upload_dir")에서 구성된 가상 디렉토리; // 업로드 경로 설정 // virtual directory string의 액세스 경로 virtualdir = contextUtil.getsysprop ( "vameual_dir"); srcname) {srcname = srcname.substring (srcname.indexof ( "."));} else {srcname = ".jpg";} string filename = ""; // upload filename = uproaddir + file.separator + dirname + file + fullsdf.format (new fullsdf.forat) srcname; // 데이터 문자열 savepath에 저장할 경로를 가져옵니다. savepath = filename.replace (uploaddir "," "); savepath = virtualdir + savepath.replace ("// ","/"); 파일 = 새 파일 (filename); if (! file.getparentfile (). fos = new fileoutputStream (file); // 한 번 30kbbyte [] readbuff = new byte [1024 * 30]; int count = -1; SavePath;}4. 업로드 중에 발생하는 몇 가지 문제를 해결하십시오
업로드를 클릭하면 업로드가 발생하면 진행률 표시 줄이 100%로 표시되며 JSP 페이지에는 [Object, OBEJCT]가 표시되고 반환 된 JSON 객체가 백그라운드에 있는지 여부에주의를 기울입니다.
위의 것은 편집자가 소개 한 여러 파일 업로드를 구현하기위한 Bootstrap의 FileInput 플러그인의 방법입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!