Jika Anda tidak tahu konfigurasi bootstrap-fileInput, Anda dapat memeriksa situs web resmi: http://plugins.krajee.com/file-putput.
Deskripsi Logis: Pertama dapatkan tampilan data dari latar belakang, lalu edit.
Tanpa basa -basi lagi, cukup unggah kode.
1. Bagian dari kode halaman:
<Div> <label for = "inputeMail3"> Logo Proyek </LABEL> <IV> <INPUT ID = "testLogo" type = "file" name = "icofile"/> <input type = "text" name = "htestlogo" id = "htestlogo" onchange = "addFile (this) </Div> </Div>
Catatan: Di mana Onchange () diperlukan oleh bisnis saya, dan acara tambahan akan dieksekusi secara otomatis setelah unggahan selesai. Metode ini dapat dihapus.
2. Dapatkan metode data inisialisasi:
// Inisialisasi untuk mendapatkan file asli $ (function () {$ .Ajax ({type: "Post", url: "/eim/project/testfileupload.do", DataType: "json", Success: function (data) {layer.msg ('Operation menggantikan!'); Showphotos (data); {layer.msg ('Operation menggantikan!'); Showphotos (data); {{layer.msg ('Operation menggantikan!'); Showphotos (data); {{layer. errorthrown) {layer.msg ('Operasi Gagal!');Deskripsi: Di sini saya mengembalikan Array Objek: Daftar <GanManSer>, yang dapat dipahami sebagai semua siswa di kelas dan menampilkan avatar
3. Inisialisasi komponen Bootstrap-FileInput:
function showphotos (djson) {// mengembalikan string JSON ke objek JSON di latar belakang var redata = eval (djson); // pratinjau gambar grup data json var prelist = array baru (); untuk (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // Here we refer to the judgment for .txt, and add the rest to yourself if(array_element.fileIdFile.name.indexOf("txt")>0){ // Display of non-image types preList[i]= "<div class='file-preview-other-frame'><div class='file-preview-other'><span class='file-icon-4x'><i class='fa fa-file-text-o Text-Info '> </i> </span> </div> </div> "} else {// tipe gambar prelist [i] =" <img src =/"/eim/unggah/getimg.do? savePath ="+array_element.fileidfile.filePath. "& name ="+array_element.fileidfile.filePath. "& name ="+"+array. class =/"File-preview-image/"> "; }} var previewjson = prelist; // konfigurasi data yang sesuai dengan grup data JSON dari gambar pratinjau di atas var preconfigList = array baru (); untuk (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {caption: array_element.fileidfile.fileName, // Lebar nama file yang ditampilkan: '120px', url: '/eim/project/deleteFile.do', // Hapus Kunci Url: array_element.id, // hapus adalah parameter yang dilewati oleh ajax ke latar belakang: latar belakang: {hapus {ID 100 preconfiglist [i] = tjson; } // Query the specific parameters by yourself.fileinput({ uploadUrl: '/eim/upload/uploadFile.do', uploadAsync:true, showCaption: true, showUpload: true,//Whether the upload button is displayed, showRemove: false,//Whether the delete button is displayed, showCaption: true,//Whether the input box is displayed, ShowPreview: True, ShowCancel: True, DropzoneEnabled: False, MaxFileCount: 10, InitialPreviewShowDelete: True, Msgfilestoomany: "Pilih jumlah file yang diunggah melebihi nilai maksimum!", InitialPreview: PreviewJson, previewfileicon: <i> <///ImageTiew '' PreviewFileIconsettings: {'docx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>', 'Pdf': '<i> </i>', 'zip': '<i> </i>,', ',', ',', ',', ',', 'PDF', 'PDF', 'PDF', ',', ',', '. preconfiglist}). off ('filepreupload'). on ('filePreupload', function () {// alert (data.url);}). on ("fileuploaded", function (event, outdata) {// data yang dikembalikan setelah file diunggah dengan sukses, saya hanya menyimpan ID. penugasan input yang sesuai $ ('#htestlogo'). Val (hasil) .change (); }4. Backend Java menyimpan bagian dari kode file
Metode = requestMethod.post) @ResponseBody Obyek Public Obyek unggah (httpservletRequest, httpservletResponse response) MultipREXTHETTH {// Convert to Multiparthtpservletther = (MultiparthttpservletRequest) permintaan; // Dapatkan file ke dalam peta wadah peta <string, multipartfile> filemap = multipartrequest.getFileMap (); // Dapatkan parameter path yang dilewati oleh folderPath halaman = request.getParameter ("folder"); String rootpath = baseconfig.uploadpath; String filepath = rootpath + folderPath + "/"; // Unggah file dan kembalikan wadah peta, peta menyimpan informasi file filemodel filemodel = unggahanutils.uploadfiles (filepath, filemap); bendera boolean = service.add (filemodel); if (flag) {string result = filemodel.getId ()+";"+filemodel.getFilePath ()+";"+filemodel.getName ()+";"+filemodel.getFilePath (); Peta peta = hashmap baru <> (); peta.put ("id", filemodel.getId ()); // kembalikan file simpan id //response.getwriter().write(map); peta mengembalikan; } return null; }Catatan: Kode ini memperoleh bagian dari informasi file yang diunggah, seperti nama file, jalur yang diunggah, dll., Dan menyimpan informasi file ke dalam tabel, dan objek yang sesuai adalah filemodel.
5. Segarkan komponen setelah unggahan selesai.
Efek tampilan akhir:
Catatan: Di sini kami merujuk pada penilaian jenis file txt. Untuk sisa DOC dan PPT, ada ikon tampilan yang sesuai. Anda hanya perlu menambahkan gaya yang sesuai saat menentukan apakah akan menilai.
Lampiran: Menurut Path Past/Unduh kode file:
/** * File download* * @param savePath * Save directory* @param name * Original file * The name when saving contains the suffix* @param request * @param response * @return */ public static String down(String savePath, String name, String fileName, HttpServletRequest request, HttpServletResponse response) { try { String path = savePath + "/" + name; File file = file baru (path); if (! file.exists ()) {// request.setAttribute ("name", fileName); return "download_error"; // kembalikan file unduhan tidak ada} response.setContentType ("Application/Octet-stream"); // Atur string header respons userAgent = request.getHeader ("user-agent"). TolowerCase (); if (useragent.indexof ("msie")! = -1) {// IE browser // system.out.println ("IE browser"); response.addheader ("disposisi konten", "lampiran; fileName =" + urlencoder.encode (nama, "UTF-8"))); } else {response.addheader ("konten-disposisi", "lampiran; fileName =" + string baru (name.getbytes ("UTF-8"), "iso8859-1")); } response.addheader ("Content-length", "" + File.length ()); // Unduh file dalam bentuk stream inputStream fis = baru bufferedInputStream (fileInputStream (path)) baru); byte [] buffer = byte baru [fis.available ()]; fis.read (buffer); fis.close (); //response.setContentType("Image/* "); // atur pengembalian jenis file outputStream toclient = response.getoutputStream (); OutputStream BOS = BufferedOutputStream baru (ToClient); // BufferedWriter BW = BufferedWriter baru (OutputStreamWriter baru (BOS)); bos.write (buffer); //bw.close (); bos.close (); toclient.close (); kembali nol; } catch (Exception e) {E.PrintStackTrace (); //response.reset (); kembalikan "Exception"; // Kembalikan ke halaman pengecualian} akhirnya {/* if (ToClient! = null) {coba {toClient.close (); } catch (ioException e) {e.printstacktrace (); }}*/}}Terlampir:
DEADLUADYUTILS.UPLOADFILES Bagian dari kode
Public Static FileModel unggahan (string savePath, peta <string, multipartfile> filemap) {// unggah file // model lampiran objek filemodel fm = new filemodel (); coba {file file = file baru (savePath); // Tentukan apakah folder ada, dan jika tidak ada, buat folder makedir (file); if (filemap! = null) {for (map.entry <string, multipartfile> entitas: filemap.entryset ()) {multipartfile f = entity.getValue (); if (f! = null &&! f.isempty ()) {string uuid = unggahanututils.getuuid (); // uuid adalah nama file saat menyimpan string ext = unggahanutil.getfilext file saveFilex (f.getoriginalfile ()); // dapatkan suffix file // save newfile (f.getoriginalfile () ()); // Dapatkan suffix file // save newfile (f.getoRiginalFile () ()); // Dapatkan suffix file // save newfile (f.getoRiginalSe () ()); // Dapatkan file sufiks // savePATE (f.getoRiginalSe () ()); f.transferto (newfile); fm.setFileName (f.getoriginalFileName ()); fm.setname (uuid+"."+ext); fm.setFilePath (savePath); // simpan path fm.setext (ext); fm.setsize (f.getsize ()); }} return fm; } catch (Exception e) {log.error (e); kembali nol; }}Di atas adalah unggahan dan pengeditan FileInput di Bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!