Bootstrap-FileInput의 구성을 모르는 경우 공식 웹 사이트 (http://plugins.krajee.com/file)를 확인할 수 있습니다.
논리 설명 : 먼저 배경에서 데이터 표시를 가져온 다음 편집합니다.
더 이상 고민하지 않고 코드를 업로드하십시오.
1. 페이지 코드의 일부 :
<div> <label for = "inputeMail3"> project logo </label> <div> <div> <input id = "testLogo"type = "file"name = "iCofile"/<input type = "text"name = "htestlogo"id = "htestlogo"addfile (this) "> </div> </div> </div>
참고 : 비즈니스에서 OnChange ()가 필요한 경우, 업로드가 완료된 후에 추가 이벤트가 자동으로 실행됩니다. 이 방법을 제거 할 수 있습니다.
2. 초기화 데이터 방법을 가져옵니다.
// 원본 파일을 가져 오기 위해 초기화 (function () {$ .ajax ({type : "post", url : "/eim/project/testfileupload.do", datatype : "json", success : function (data) {layer.msg ( 'Operation succeeds!'); showphotos (data), orror (xmlhttpreatus) errorthrown) {layer.msg (작동 실패! ');설명 : 여기에서 객체 배열을 반환합니다 : List <MemberUser>.
3. 부트 스트랩 파일 푸트 구성 요소를 초기화합니다.
함수 showphotos (djson) {// json 문자열을 배경의 JSON 객체로 var redata = val (djson)에 반환합니다. // 사진 미리보기 json 데이터 그룹 var prelist = new array (); for (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // 여기서 우리는 .txt에 대한 판단을 참조하고 나머지를 직접 추가합니다. fa-file-text-o text-info '> </i> </span> </div> </div> "} else {// image type prelist [i] ="<img src =/"/eim/upload/getimg.do? savepath ="+array_element.fileidfile.filepath+"& name ="+array_element.fileidfile.file.file. class =/"file-preview-image/"> "; }} var previewjson = 프리리스트; // 위의 미리보기 이미지의 JSON 데이터 그룹에 해당하는 구성 데이터 var preconfiglist = new array (); for (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {caption : array_element.fileIdfile.filename, // 표시된 파일 이름 너비 : '120px', '120px', '120px', // URL 키 삭제 : Aray_Element.id, // ajax가 배경에 전달한 매개 변수는 다음과 같습니다. preconfiglist [i] = tjson; } // 직접 특정 매개 변수를 쿼리합니다 .FileInput ({uploadUrl : '/eim/upload/uploadfile.do', uploadasync : true, showcaption : true, showupload : true, // 업로드 버튼이 표시되는지 : 거짓, // 삭제 버튼이 표시되는지, true, // showcaption인지, // showpreview : true, showcancel : true, dropzoneenabled : false, maxfilecount : 10, initialpreviewshowdelete : true, msgfilestoomany : "업로드 된 파일의 수는 최대 허용 값을 초과하는 것!" previewfileiconsettings : { 'docx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>', 'pdf': '<i> </i>', 'zip': '<i> </i>', 'sql': '<i>',}, preconfiglist}). off ( 'filepreupload'). on ( 'filepreupload', function () {// alert (data.url);}). on ( "fileUploaded", function (event, outData) {// 파일이 성공적으로 업로드 된 후에 반환 된 데이터는 var var var var rendate. 입력 할당 $ ( '#htestlogo'). val (result) .change (); }4. Backend Java는 파일 코드의 일부를 저장합니다
@requestmapping (value = "/uploadfile", method = requestmethod.post) @ResponseBody public object uploadfile (httpservletrequest request, httpservletreponse 응답) servletexception, ioexception {// multiparthtpervletrequestttrequest to multiptartrattrequest quest quest quest = (multiparthttpservletrequest) 요청; // 파일을 맵 컨테이너 맵으로 가져옵니다. <string, multipartFile> filemap = multipartRequest.getFileMap (); // 페이지 폴더 path = request.getParameter ( "폴더")로 전달되는 경로 매개 변수를 가져옵니다. 문자열 rootpath = baseconfig.uploadpath; 문자열 filepath = rootpath + folderPath + "/"; // 파일을 업로드하고 맵 컨테이너를 반환하면 맵은 파일 정보를 저장합니다. filemodel fileModel = uploadifyUtils.uploadfiles (filepath, filemap); 부울 플래그 = service.add (filemodel); if (flag) {string result = fileModel.getId ()+";"+fileModel.getFilePath ()+";"+fileModel.getName ()+";"+fileModel.getFilePath (); 지도 맵 = 새로운 해시 맵 <> (); map.put ( "id", filemodel.getId ()); // 반환 파일 저장 ID //response.getWriter().write(map); 리턴 맵; } return null; }참고 :이 코드는 파일 이름, 업로드 된 경로 등과 같은 업로드 된 파일의 정보의 일부를 얻고 파일 정보를 테이블에 저장하면 해당 객체가 FileModel입니다.
5. 업로드가 완료된 후 구성 요소를 새로 고칩니다.
최종 디스플레이 효과 :
참고 : 여기서는 TXT 파일 유형 판단을 참조하십시오. DOC 및 PPT의 나머지 부분에는 해당 디스플레이 아이콘이 있습니다. 판단 여부를 결정할 때만 해당 스타일 만 추가하면됩니다.
첨부 파일 과거/다운로드 파일 코드에 따라 :
/** * 파일 다운로드 * * @param savepath * 저장 디렉토리 * @param 이름 * 원본 파일 * 저장시 이름에는 접미사 * @param request * @param response */public static string (문자열 savepath, 문자열 이름, 문자열 파일 이름, httpservletrequest 요청, httpservletresponse 응답) {string path = + " +" + " +" + " 파일 = 새 파일 (Path); if (! file.exists ()) {// request.setattribute ( "name", filename); "download_error"를 반환합니다. // 다운로드 파일이 존재하지 않습니다. // 응답의 헤더 문자열을 설정하십시오. userAgent = request.getheader ( "user-agent"). tolowercase (); if (userAgent.indexof ( "msie")! = -1) {// browser // system.out.println ( "즉, 브라우저"); response.addheader ( "content-disposition", "첨부 파일; filename =" + urlencoder.encode (이름, "utf-8")); } else {response.addheader ( "content-disposition", "첨부 파일; filename =" + new String (name.getBytes ( "utf-8"), "iso8859-1")); } response.addheader ( "Content-length", "" + file.length ()); // 스트림 inputStream fis = new bufferedInputStream (new FileInputStream (Path)) 형식으로 파일을 다운로드합니다. 바이트 [] buffer = new Byte [fis.available ()]; fis.read (버퍼); fis.close (); //response.setContentType("Image/* "); // 반환 파일 설정 outputStream toclient = response.getOutputStream (); OutputStream BOS = 새로운 BufferedOutputStream (ToClient); // bufferedWriter bw = new BufferedWriter (New OutputStreamWriter (BOS)); bos.write (버퍼); //bw.close (); bos.close (); toclient.close (); 널 리턴; } catch (예외 e) {e.printstacktrace (); //response.reset (); "예외"; // 예외 페이지로 돌아갑니다} 마지막으로 {/* if (toclient! = null) {try {toclient.close (); } catch (ioexception e) {e.printstacktrace (); }}*/}}첨부된:
uploadifyutils.uploadfiles 코드의 일부입니다
public static filemodel uploadfiles (String savepath, map <string, multipartfile> filemap) {// 파일 업로드 // 첨부 파일 모델 객체 filemodel fm = new FileModel (); try {file file = 새 파일 (savepath); // 폴더가 존재하는지 여부를 결정하고 존재하지 않으면 폴더 Makedir (파일)을 만듭니다. if (filemap! = null) {for (map.entry <string, multipartfile> entity : filemap.entryset ()) {multipartFile f = entity.getValue (); if (f! = null &&! f.isempty ()) {string uuid = uploadifyutils.getuuid (); // uuid는 string을 저장할 때 파일 이름입니다. ext = uploadifyutils.getfileext (f.getoriginalfilename ()); // 파일을 저장 lewfile = new Patpile =+uuid+". f.transferto (NewFile); fm.setfilename (f.getoriginalfilename ()); fm.setName (uuid+"."+ext); fm.setfilepath (savepath); // 경로 저장 fm.setext (ext); fm.setsize (f.getsize ()); }} 반환 fm; } catch (예외 e) {log.error (e); 널 리턴; }}위는 편집자가 소개 한 Bootstrap에서 FileInput의 업로드 및 편집입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!