JAVAWEB UEDLOAD File Unduh Contoh Penjelasan (Teknologi Unggah File Keren)

1. Tinjauan Kursus

Dalam pengembangan sistem aplikasi web, fungsi unggahan file adalah fungsi yang sangat umum. Hari ini, mari kita terutama berbicara tentang implementasi teknis yang relevan dari fungsi pengunggahan file di Javaweb. Dengan perkembangan teknologi internet yang cepat, persyaratan pengalaman pengguna untuk situs web semakin tinggi dan lebih tinggi. Ada juga banyak poin inovatif dalam teknologi fungsi pengunggahan file, seperti pengunggahan asinkron, pengunggahan drag-and-drop, pengunggahan paste, pengunggahan pemantauan kemajuan, thumbnail file, transmisi kontinu breakpoint file besar, transmisi instan file besar, dll.

Dasar -dasar yang diperlukan untuk kursus ini:

Pahami konten protokol http dasar

Teknologi Operasi Aliran IO Dasar

Dasar -dasar Servlet

Pengetahuan Dasar Teknologi JavaScript/JQuery

2. Dasar -dasar unggahan file

Untuk unggahan file, browser mengirimkan file ke sisi server dalam bentuk aliran selama proses unggahan, dan semua data streaming akan dibawa ke sisi server dengan permintaan HTTP. Oleh karena itu, format konten yang diminta saat mengunggah file pada dasarnya harus dipahami.

Halaman Upload File:

 <Form Action = "/ItheimaMaupload/unggah Method" Method = "POST" ENCTYPE = "Multipart/Form-Data"> Pilih file yang diunggah: <input type = "file" name = "lampirkan"/> <br/> <input type = "kirim" value = "kirim"/</form>

Konten Permintaan HTTP:

3. Latar belakang java menggunakan servlet untuk menerima file

Ini merepotkan jika Anda menggunakan servlet untuk mendapatkan aliran input file yang diunggah dan kemudian menguraikan parameter permintaan di dalamnya. Oleh karena itu, secara umum, latar belakang memilih untuk menggunakan komponen unggahan file-file Umum, alat open source dari Apache.

 // Kode Latar Belakang Java: Commons-FileUpload Komponen Mengunggah File Public Class UploadServlet Memperluas httpservlet {public void doGet (httpservletRequest, respons httpservletResponse) melempar servletException, IoException {// 1. Konfigurasikan Cache DiskFileItemFactory Factory = New DiskFileItemFactory (1*1024*1024, file baru ("c:/tempfiles/")); // 2. Buat Objek ServleFileUpload ServletFileUpload SFU = SERVLETFILEUPLOAD baru (pabrik); // Selesaikan masalah Cina dari nama file sfu.setheaderencoding ("UTF-8"); // 3. Resolve try {List<FileItem> list = sfu.parseRequest(request);//Resolve all content if(list!=null){for(FileItem item:list){//Determine whether it is a normal form parameter if(item.isFormField()){//Ordinary form parameters//Get the name attribute name of the form String fieldName = item.getFieldName();//Get the form parameter value String value = item.getString ("UTF-8"); } else {// File if (item.getName ()! = null &&! item.getName (). Equals ("")) {// Simpan ke server hard disk fileutils.copyInputStreamtofile (item.getInputStream (), file baru ("c:/targetFiles/"+item.getName ()) (); )

4. Gunakan WebUploader untuk mengunggah komponen

Di ujung depan halaman unggahan file, kami dapat memilih untuk menggunakan beberapa komponen unggahan yang lebih berguna, seperti komponen open source baidu WebUploader. Komponen ini pada dasarnya dapat memenuhi beberapa fungsi sehari-hari pengunggahan file, seperti pengunggahan asinkron, pengunggahan seret-dan-drop, menempel pengunggahan, mengunggah pemantauan kemajuan, thumbnail file, dan bahkan breakpoint file besar untuk melanjutkan transmisi, dan transmisi file besar dalam hitungan detik.

Unduh komponen webupload

http://fex.baidu.com/webuploader/ Unduh paket WebUpload di situs web resmi WebUpload

Struktur Direktori Webupload:

Demo Unggah File Dasar (termasuk kemajuan unggahan)

ujung depan

1.1 Impor CSS yang diperlukan, JS di halaman

 <tautan rel = "stylesheet" type = "text/css" href = "$ {pageContext.Request.contextPath} /css/webuploader.css"> <type skrip = "text/javascript" src = "$ {pagecontext.context } /js/jQuery-1.10.2.min.js "> </script> <script type =" text/javascript "src =" $ {pagecontext.request.contextPath} /js/webUploader.js "> </script>

1.2 Tulis tag halaman unggah

 <!-Unggah Div-> <div id = "unggah"> <!-Tampilkan informasi daftar file-> <ul id = "fileList"> </ul> <!-Pilih Area File-> <Div ID = "FilePicker"> Klik untuk memilih File </Div> </Div>

1.3 Menulis kode webupload

 <type skrip = "Text/JavaScript"> // 1. Inisialisasi webupload dan konfigurasikan parameter global var unggah = webuploader.create ({// alamat kontrol flashk swf: "$ {pagecontext.request.contextpath} /js/uploader.swf", // unggah unggah: "$ {pagecontext.request.rquest.sluqu {pagecontext.request. Pilih: "#FilePicker", // Otomatis Mengunggah file Auto: true,}); // 2. Setelah memilih file, tampilan antrian informasi file // Daftarkan acara filequeued: dipicu saat file ditambahkan ke antrian // file: mewakili file unggah yang saat ini dipilih. class = 'fileInfo'> <span> "+file.name+" </span> <div class = 'state'> menunggu unggahan ... </div> <span class = 'text'> </span> </div> ");}); // 3. Daftar Upload Progress Mendengarkan // File: Mengunggah file // Persentase: Proporsi kemajuan saat ini. Maksimum adalah 1. Misalnya: 0.2uploader.on ("UploadProgress", Function (File, Persentase) {var id = $ ("#"+file.id); // Perbarui Informasi Status ID.Find ("Div.State"). Teks ("Unggah ..."); // Perbarui persentase unggahan unggahan unggahan unggahan unggahan unggahan unggahan unggahan unggahan unggahan id.find ("span.text"). Teks (Math.round (Persentase*100)+"%");}); // 4. Daftar dan Unggah Mendengarkan // File: Diunggah File // Respons: Data dikembalikan oleh latar belakang, kembalikan unggahan.

2) Kode Servlet Backend

 DiskFileItemFactory factory = new DiskFileItemFactory (); servletFileUpload sfu = new servletFileUpload (factory); sfu.setHeaderencoding ("UTF-8"); coba {list (fileitem> item = sfu.parsequest (request); for); for (fileitem> item = sfu.parsequest (request); for); for (FileItem> item = sfu.parsequest (request); Informasi} else {// Informasi file // menilai bahwa hanya file yang perlu disimpan dan diproses System.out.println ("Nama file yang diterima:"+item.getName ()); // Salin file ke hard disk di file latar belakang. Simpan berhasil ");}}} catch (FileuploadException e) {e.printstacktrace ();}

Menghasilkan gambar kecil gambar

Poin Kunci: Panggilan unggah.makethumb () Metode untuk menghasilkan thumbnail

 unggah.on ("filequeued", function (file) {// tambahkan informasi file div $ ("#fileList"). append ("<v id = '"+file.id+"' class = 'FileInfo'> <mimg/<span>"+file.name+"</span> <div class = 'state' menunggu untuk mengunggah ... class = 'text'> </span> </div> "); // buat gambar gambar: hubungi makethumb () metode // kesalahan: gagal membuat thumbnail // src: path of thumbnails unggah.makethumb (file, function (error, src) {var id = $ ("#"+file.id); if (error) {id.find ("img"). Replacewith ("tidak dapat melihat");} // Jika berhasil, thumbnail akan ditampilkan ke posisi ID.find yang ditentukan ("img"). ATTREG ("SRC", SRC);});});

Seret, tempel, dan unggah

1) Tambahkan div ke area seret di halaman

 <!-Unggah Div-> <div id = "unggah"> <!-Area drag file-> <div id = "dndarea"> <p> Seret file langsung di sini untuk mengunggah secara otomatis </p> </div> <!-Tampilkan informasi daftar file-> <ul id = "FileList"> </ul> <!-Pilih Area File-> <Ul ID = "FileList"> </ul> <!

2) Tambahkan parameter seret dan jatuhkan ke parameter konfigurasi global dari WebUploader

 // 1. Inisialisasi webupload dan konfigurasikan parameter global var unggah = webuploader.create ({// alamat kontrol flashk swf: "$ {pagecontext.request.contextpath} /js/uploader.swf", // unggah unggah: "$ {pagecontext.request.rquest.sluqu {pagecontext.request. Pilih: "#FilePicker", // File Upload Otomatis Auto: true, // Aktifkan fungsi drag and drop, tentukan area seret dnd: "#dndarea", // nonaktifkan fungsi seret dan jatuhkan di tempat lain dari halaman untuk mencegah halaman dari langsung membuka file Disablobaldnd: true // aktifkan paste: "#unggahan"});

Unggah file besar dalam potongan

1) Tambahkan parameter unggahan blok ke parameter global webuploader

 // 1. Inisialisasi webupload dan konfigurasikan parameter global var unggah = webuploader.create ({// alamat kontrol flashk swf: "$ {pagecontext.request.contextpath} /js/uploader.swf", // unggah unggah: "$ {pagecontext.request.rquest.sluqu {pagecontext.request. Pilih: "#FilePicker", // Otomatis Mengunggah File Auto: True, // Enable Function Drag and Drop, tentukan area seret DND: "#dndarea", // Nonaktifkan fungsi drag and drop di tempat lain untuk mencegah halaman dari pembukaan file secara langsung,/setel,/end: ​​unggah,/unggah, Chunked: true, // Ukuran file per blok (default 5m) Chunksize: 5*1024*1024, // Buka beberapa utas bersamaan (default 3) utas: 3, // Saat mengunggah file saat ini, prepareNextFile: true});

2) Pantau tiga titik waktu untuk mengunggah file

Setelah menambahkan tiga konfigurasi di atas, Anda akan menemukan bahwa ketika file melebihi 5m, WebUploader akan secara otomatis mengirim file ke latar belakang.

Setiap permintaan blok berisi informasi:

Anda dapat mendengarkan tiga titik waktu penting dalam unggahan file dalam potongan.

 Sebelum-Send-File: Hubungi sebelum-end-end-end: Jika ada blok, hubungi after-send-file sebelum setiap blok dikirim: dipanggil setelah semua blok dikirim // 5. Pantau tiga titik waktu pengunggahan file (Catatan: Bagian kode ini harus ditempatkan sebelum WebUploader.create) // Titik Waktu 1 :: Sebelum semua blok diunggah (1. Tanda unik dari file dapat dihitung; 2. Ini dapat menentukan apakah ada yang terkena detik). transmisi berkelanjutan) // Langkah 3: Setelah semua potongan berhasil diunggah (1. Beri tahu latar belakang file chunk untuk menggabungkan) webuploader.uploader.register ({"sebelum-di-file": "fungsi langkah" sebelum afterfile "sebelum afterfile": "aftersend", "aftersendfile," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," aftersendfile "," Chunks befteSendfi le: function () {// 1. Minta apakah latar belakang telah menyimpan blok saat ini. Jika ada, lewati file blok untuk mewujudkan fungsi transmisi kontinu breakpoint}, // Langkah 3: Panggil fungsi ini setelah semua blok diunggah dengan sukses aftersendfile: function () {// 1. Jika diunggah dalam blok, semua file blok digabungkan melalui latar belakang}});

Logika sebelum-di-file:

 // Gunakan metode md5file () untuk menghitung tag unik dari file // fungsi ini menerima DeferredBeforesEndFile: function (file) {// Buat DeferredVar Deferred = WebUploader.Deferred (); // 1. Hitung tag unik dari file, yang digunakan untuk transmisi kontinu breakpoint dan transmisi kedua (webuploader.uploader ()) baru (file, 0,5*1024*1024) .progress (function (persentase) {$ ("#"+file.id) .find ("div.state"). Diperoleh ... ");}). Lalu (function (val) {uniquefiletag = val; $ ("#"+file.id) .find (" Div.State "). Teks (" Berhasil diperoleh informasi file "); // hanya ketika informasi file berhasil diperoleh, operasi berikutnya akan dilakukan ditangguhkan.Resolve (); Minta apakah latar belakang telah menyimpan file. Jika ada, file akan dilewati untuk mewujudkan fungsi pass kedua // return ditangguhkan.promise ();}

Logika sebelum-SUMP:

 // Kirim tag unik dari file saat ini ke latar belakang, yang digunakan untuk membuat direktori yang menyimpan file chunked beforeSend: function () {// membawa tag unik dari file saat ini ke latar belakang, yang digunakan untuk membuat direktori yang menyimpan file chunked this.ownerer.options.formdata.filemd5 = filem; filem; FileMd5; file};

3) Latar belakang perlu menyimpan semua file chunked

 //Create a directory for each file and save all chunked files of this file //Judge whether it has been uploaded in chunks if(chunks!=null){System.out.println("chunk processing...");//Create a temporary directory to save all chunked files File chunksDir = new File(serverPath+"/"+fileMd5); if (! chunksdir.exists ()) {chunksdir.mkdir ();} if (chunk! = null) {// simpan chunkfile chunkfile = file baru (chunksdir.getpath ()+"/"+chunk); Fileutils.copyPinputStreampeMile (getIgil

4) Meja depan memberi tahu backend untuk menggabungkan semua file yang dipotong

 // Meja Depan memberi tahu latar belakang untuk menggabungkan file-file After-Send-File: aftersendfile: function (file) {// 1. Jika diunggah dalam chunks, gabungkan semua file chunk melalui latar belakang // minta latar belakang untuk menggabungkan file $ .AJAX ({type: "POST", URL: "$ {pagecontext.Request.contextPath}/UploadCheckServlet? Action = mergechunks", data: {// File tag unik tag unik tag unik tag unik? Nama file: file.name}, DataType: "json", Success: function (response) {alert (response.msg);}});} // latar belakang menggabungkan semua file chunked if ("mergechunks". FileName = request.getParameter ("FileName"); // Baca semua file dalam file direktori f = file baru (serverpath+"/"+filemd5); file [] fileArray = f.listFiles (FileFilter () {fale new () {{fale needname (fale) {fale neole (fale) {{fale need (fale) {fale neolean (fale) {fale) {fale) {fale) {fale) {fale neolean (fale) true;}}); // Konversi ke koleksi untuk memfasilitasi daftar penyortiran <prile> fileList = new arraylist <pangkok> (arrays.aslist (filearray)); // urutkan dari koleksi kecil ke besar. Integer.parseint (o2.getName ())) {return -1;} return 1;}}); File outputFile = file baru (serverpath+"/"+filename); // Buat file outputFile.createnewfile (); output. inchannel; untuk (file file: filelist) {inchannel = FileInputStream baru (file) .getChannel (); inchannel.transferto (0, inchannel.size (), outchannel); inchannel.close (); // hapus shard file.delete ();} // clear folder fILEER (); // hapus shard. if (tempfile.isdirectory () && tempfile.exists ()) {tempfile.delete ();} // tutup aliran outchannel.close (); response.setContentType ("Teks/html; {" {"{" {"{" {"

Breakpoint File Besar Lanjutkan

Berdasarkan implementasi unggahan blok, sangat mudah untuk mengimplementasikan transmisi kontinu breakpoint! Lai Lai

Ujung Depan:

 // Titik Waktu 2: Jika ada unggahan blok, fungsi ini dipanggil sebelum setiap blok unggahan // blok: mewakili objek blok saat ini menjadi beforeSend: function (blok) {// 1. Minta apakah latar belakang telah menyimpan blok saat ini. Jika ada, lewati file blok untuk mewujudkan fungsi transmisi kontinu breakpoint var ditangguhkan = webuploader.deferred (); // minta apakah latar belakang menyimpan informasi file. Jika telah disimpan, itu akan dilewati. Jika belum, konten chunk akan dikirim $ .AJAX ({type: "Post", URL: "$ {pagecontext.Request.contextPath}/unggahCheckServlet? Action = checkchunk", {// file unik filemd5: filemd5, // chunk chokk: chunk chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, chokk, Chokk, Chokk, Chokk, Chokk, Chokk, Chokk, Chokk: FileMd5, // Chokk: Chokk: Chokk: Chokk, Chokk, Chokk, Chokk, Chokk, Chokk, Chokk, Chokk, Chokk: FileMd5, // Chokk: The Chokk: Chokk: The Chockunk. lock.end-block.start}, DataType: "json", Success: function (response) {if (response.ifexist) {// blok ada, lewati blok ditangguhkan. direktori yang menyimpan file blok this.Owner.Options.FormData.filemd5 = filemd5; return retred.promise (); },

Backstage:

 //Check whether the chunk exists or saves private void checkChunk(HttpServletRequest request,HttpServletResponse response) throws IOException,FileNotFoundException {System.out.println("checkChunk...");String fileMd5 = request.getParameter("fileMd5");String chunk = request.getParameter("chunk");String chunksize = request.getParameter ("chunksize"); file checkfile = file baru (serverpath+"/"+filemd5+"/"+chunk); response.setContentType ("Teks/html; charset = UTF-8"); // periksa apakah file yang dikeluarkan dan ukurannya (centang (centang ((((centang) (() (() (((((centang, (((centang (((centang, checkfile.length () == integer.parseint (chunksize)) {response.getWriter (). write ("{/" ifexist/": 1}");} else {response.getWriter ().

Transfer file dalam hitungan detik

Sebelum semua permintaan blok, fungsi transfer kedua dapat diimplementasikan! Lai Lai

Ujung Depan:

 befteSendFile: function (file) {// Buat defferedvar ditangguhkan = webuploader.deferred (); // 1. Hitung tanda unik dari file, yang digunakan untuk transmisi kontinu breakpoint dan transmisi kedua (webuploader.uploader ()) baru (file, 0,5*1024*1024) .progress (function) {$ ("#"+file.id) .find ("div.state"). TEKS). Val; $ ("#"+file.id) .find ("Div.State"). Teks ("Berhasil memperoleh informasi file"); // 2. $ .AJAX ({type: "POST", URL: "$ {PAGECONTEXT.REQUEST.CONTEXTPATH}/UPLOADCHECKSERVLET? Action = FileCheck", data: {// Tag unik file tersebut file tersebut filemd5: filemd5}, datatype: "json", Success: function (response) {if (response.ifexist) {$ ("#"+file.id) .find ("div.State"). Teks ("Berlaku Deferred"); Deferred.resolve ();}}});}); // Kembalikan DeferredReturn Deferred.promise ();},

Backstage:

 //Check whether the md5 data of the file is related to the database private void fileCheck(HttpServletRequest request,HttpServletResponse response) throws IOException,FileNotFoundException {String fileMd5 = request.getParameter("fileMd5");//Simulate the database Map<String,String> database = new HashMap <String, String> (); database.put ("576018603f4091782b68b78af85704a1", "01. Kursus Review.itcast "); response.setContentType (" text/html; charset = utf-8 "); if (database.containskey (filemd5)) {response.getWriter (). Write (" {/"ifexist/": 1} ");} else {response.getwriter (). {Evexist/": "{" {"{" {"{" oxist/"

Di atas adalah contoh penjelasan dari unggahan file javaweb dan unduh yang diperkenalkan editor kepada Anda (teknologi unggahan file keren). Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!