ก่อนที่จะแนะนำข้อความหลักให้ฉันแนะนำความรู้เกี่ยวกับ plupload
เบื้องต้นเกี่ยวกับ plupload
Plupload ได้รับการพัฒนาโดยนักพัฒนาของ Tinymce โดยให้ปลั๊กอินอัปโหลดที่มีให้บริการสูงสำหรับระบบการจัดการเนื้อหาของคุณหรือโปรแกรมการอัปโหลดที่คล้ายกัน ขณะนี้ Plupload แบ่งออกเป็นส่วนประกอบ API หลักและองค์ประกอบคิวอัพโหลด jQuery ซึ่งช่วยให้คุณใช้โดยตรงหรือปรับแต่งด้วยตัวเอง
ฟีเจอร์ Plupload
Plupload ใช้ส่วนประกอบ jQuery เป็นส่วนประกอบคิวสำหรับการเลือกไฟล์และอัปโหลดไฟล์
Plupload ใช้ Flash, Silverlight, HTML5, Gears, BrowserPlus และ FileUpload เพื่ออัปโหลดเอ็นจิ้นเทคโนโลยีไฟล์
Plupload อนุญาตให้การปรับแต่งใช้ Plupload Core API เพื่อเลือกไฟล์และอัปโหลดไฟล์
JavaScript ใช้เพื่อเปิดใช้งานกล่องโต้ตอบการเลือกไฟล์ กล่องโต้ตอบการเลือกไฟล์นี้สามารถตั้งค่าเพื่ออนุญาตให้ผู้ใช้เลือกไฟล์แยกต่างหากหรือหลายไฟล์ ประเภทไฟล์ที่เลือกยังสามารถ จำกัด ได้ดังนั้นผู้ใช้สามารถเลือกไฟล์ที่เหมาะสมที่ระบุเช่น JGP; GIF
Plupload อนุญาตให้ปรับแต่งเหตุการณ์บางอย่างในระหว่างกระบวนการอัปโหลดและเขียนวิธีการประมวลผลของตัวเอง
การอัปโหลดไฟล์ที่เลือกนั้นเป็นอิสระจากหน้าและแบบฟอร์มที่อยู่ แต่ละไฟล์จะถูกอัปโหลดแยกกันซึ่งทำให้มั่นใจได้ว่าสคริปต์ฝั่งเซิร์ฟเวอร์สามารถจัดการไฟล์เดียวได้ง่ายขึ้น ณ เวลา สำหรับข้อมูลเฉพาะกรุณาเยี่ยมชมเว็บไซต์อย่างเป็นทางการของ Plupload: http://www.plupload.com/
ความเป็นมา: การควบคุมการอัปโหลดไฟล์ front-end ที่ใช้ในโครงการถูกอัพโหลดและทุกอย่างก็สงบสุขสักพัก "ข่าวดี" มาจากที่เกิดเหตุและลูกค้าต้องการใช้ระบบ iPad และต้องการอัปโหลดรูปภาพ อาจารย์ของลูกค้าตบหน้าผากของเขาและต้องทำงานล่วงเวลาในการวิจัยและพัฒนา อย่างที่คุณทราบอัปโหลดขึ้นอยู่กับแฟลชดังนั้นจึงเป็นไปไม่ได้ในระบบ iOS และ MAC ดังนั้นหลังจาก Google ฉันพบ plupload การเริ่มต้นใช้งานง่ายขึ้น
รหัสหน้า HTML:
แท็กหัวมีไฟล์ JS ที่จำเป็น
<script type = "text/javascript" src = "js/jQuery-1.9.1.min.js">/สคริปต์>
<!-กล่องโต้ตอบศิลปะ->
<script type = "text/javascript" src = "artdialog/artdialog.source.js? skin = blue"> </script>
<!-plupload->
<script type = "text/javascript" src = "plupload/plupload.full.js"> </script>
องค์ประกอบของหน้าในแท็กร่างกาย
<!-ทริกเกอร์กล่องป๊อปอัพ-> <a id = "UploadBtn" href = "#"> ไฟล์อัปโหลด </a> <div id = "uploadContent" style = "แสดง: ไม่มีความสูง: 300px; overflow-x: hidden; overflow-y: auto; href = "JavaScript: void (0);"> เลือกไฟล์ </a> </div> <div id = "uploadfilequeue" style = "border: 1px solid #a7c5e2; ความสูง: 228px; width: 350px;"> </div>
รหัสในแท็กสคริปต์
var globaluploader; ฟังก์ชั่น _plupload () {var uploader = new plupload.uploader ({runtimes: 'html5, แฟลช, silverlight, html4', browse_button: 'uploadify' '/uploadaction!localupload.action',//receive actionflash_swf_url อัปโหลดโดยไฟล์:' /folder/js/plupload/moxie.swf', silverlight_xap_url: '/folder/js/plupload/moxie.xap' อัปโหลดขนาดไฟล์ mime_types: [// จำกัด ประเภทไฟล์อัปโหลด {ชื่อเรื่อง: "ไฟล์ภาพ", ส่วนขยาย: "jpg, gif, png"}]}, init: {postinit: function () {$ ('#uploadfilequeue'). html (''); bordepload}, profidpload: function (up, file) {// บ่อยครั้งก่อนที่จะอัปโหลดหลังจากคลิกปุ่ม $ .ajax ({url: "/โฟลเดอร์/ส่วนบุคคล/ส่วนบุคคล! getNewFileName.Action", ประเภท: "โพสต์", async: เท็จ, ข้อมูล: {'upfilename': file.name, 'globalpid': globalpid}, datatype: "JSON" {upfilename: data.newfilename, upfileType: file.name.split (".") [file.name.split ("."). ความยาว - 1], // คำต่อท้าย upfilesize: file.size, parentid: globalpid}); ไฟล์ ["+file.name+"] ไม่สามารถอัปโหลด ", ''); // $ ('#uploadify'). อัปโหลด ('ยกเลิก', file.id); // ยกเลิกงานอัปโหลดโดยกด id}});}, href = "javaScript: _plupload_removefile (' +i +', ' +file.id +')"> </a> </div> <pan> ' +file.name +' (' +plupload.formatsize ') </span> <b> </b> <div> <div> </div> </div> </div> </div>'); i ++;});}, uploadProgress: ฟังก์ชั่น (ขึ้น, ไฟล์) {// คลิกเพื่อเริ่มอัปโหลดและเรียกใช้ ที่นี่คุณสามารถเพิ่มแถบความคืบหน้าโดยใช้ file.percentDocument.getElementById (file.id) .getElementsByTagname ('b') [0] .innerhtml = '<span>-' + file.percent + "%</span> '%'); // progress bar}, ข้อผิดพลาด: ฟังก์ชั่น (up, err) {// ข้อผิดพลาดทริกเกอร์ document.getElementById ('คอนโซล'). innerhtml + = "/nerror#" + err.code + ":" err.message; evals ("(" + info.response + ")"); // ข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์คุณสามารถแก้ไขรายการไฟล์ในหน้า ฯลฯ }, uploadcomplete: ฟังก์ชั่น (ขึ้น, ไฟล์) {// ไฟล์ทั้งหมดจะถูกเรียกใช้หลังจากการอัปโหลด PopUpDialog () {artDialog ({id: 'ไฟล์-อภิสิทธิ์', ชื่อเรื่อง: 'ไฟล์อัปโหลด', แก้ไข: จริง, ล็อค: จริง, เนื้อหา: $ ("#uploadContent") [0], ปุ่ม: [{ชื่อ: 'เริ่มอัปโหลด', โฟกัส: จริง function () {$ ('#uploadfilequeue'). html (''); // ลบเนื้อหาของคิวอัปโหลด globaluploader.files.splice (0, globaluploader.files.length); // ล้างเนื้อหา function () {$ ('#uploadfilequeue'). html (''); // ลบเนื้อหาของคิวอัปโหลด globaluploader.files.splice (0, globaluploader.files.length); // ล้างเนื้อหาในการอัปโหลด คิว}});} $ (function () {$ ('#uploadbtn') คลิก (ฟังก์ชั่น () {popupdialog ();}); _ plupload ();});ฉันจะไม่เขียนรหัสพื้นหลัง ฉันใช้การกระทำแบ็กเอนด์ Struts2 เพื่อรับไฟล์ที่ได้รับโดยใช้ไฟล์ไฟล์ส่วนตัว เปลี่ยนชื่ออื่นเป็น null ฉันยังไม่รู้วิธีตั้งค่านี้ในการควบคุม
จากนั้นนี่คือเอฟเฟกต์
หากคุณต้องการเพิ่มสไตล์ CSS เหล่านี้ลงในแถบความคืบหน้าคุณสามารถควบคุมได้
<style type = "text/css"> #updoadfilequeue {ตำแหน่ง: สัมพัทธ์; ซ้าย: 0; top: 0; border: 1px solid #a7c5e2; margin-bottom: 5px; ความสูง: 228px; width: 350px; overflow-x: ซ่อน; */พื้นหลังสี: #FFF; -WebKit-Border-Radius: 3px; Border-Radius: 3px; Font: 11px Verdana, Geneva, Sans-Serif;/* margin-top: 5px; */มาร์จิ้น: 5px 5px 5px 5px; Max-Width: 350px; padding: 10px;}. uploadify-progress {พื้นหลัง-สี: #e5e5e5; margin-top: 10px; width: 100%;}. uploadify-progress-bar 1px;} </style>เอฟเฟกต์สุดท้าย อะไรฉันยังต้องการอัปโหลดเพื่อลบไฟล์ในคิวส้อมตกลง
เพิ่มสิ่งนี้อย่างมีสไตล์
.uploadify-queue-item .cancel a {พื้นหลัง: url ('js/uploadify-cancel.png') 0 0 No-repeat; Float: Right; ความสูง: 16px; text-indent: -9999px; width: 16px;}}}แน่นอนคุณต้องเพิ่มรหัส JS ที่ถูกลบ มี removeFile (ไฟล์) ใน API อย่างเป็นทางการที่นี่ แต่มันไม่ง่ายที่จะใช้ที่นี่ ดังนั้นอีกวิธีหนึ่งที่ใช้ในการแยก (NUM, ความยาว), NUM จะถูกลบออกจากครั้งแรกและความยาวคือจำนวนของการลบ
ฟังก์ชั่น _plupload_removefile (removenum, fileid) {globaluploader.files.splice (removenum, 1); // ลบไฟล์บางไฟล์ $ (fileid) .fadeout ();};เอฟเฟกต์สุดท้าย
ข้างต้นคือ plupload+artdialog ที่แนะนำให้คุณทราบโดยตัวแก้ไขเพื่อให้ได้ไฟล์อัปโหลดแบบหลายแพลตฟอร์ม ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!