ฟังก์ชั่นการอัปโหลดแบบอะซิงโครนัส HTML5

ฟังก์ชั่นการอัปโหลดของไฟล์การพัฒนาไม่เคยเป็นสิ่งที่น่าพอใจและมันก็ยิ่งกว่านั้นสำหรับการอัปโหลดแบบอะซิงโครนัส บทความนี้ใช้ FormData ของ HTML5 สั้น ๆ เพื่อใช้การอัปโหลดไฟล์แบบอะซิงโครนัสและยังสามารถบรรลุแถบรายการอัปโหลดและการตรวจสอบขนาดไฟล์ เซิร์ฟเวอร์ใช้โครงการ SpringMVC สำหรับการประมวลผล

 <form id = myform> <input type = file id = u_photo name = u_photo/> <input type = button id = submit-btn value = upload/> </form>

 $ (#subment-btn) .on ('คลิก', function () {$ .ajax ({url:/test/upload, พิมพ์: โพสต์, ข้อมูล: ใหม่ formData ($ (#MyForm) .get (0)) , // มันสำคัญมาก

การควบคุมขนาดไฟล์และพฤติกรรมที่สอดคล้องกันจะต้องดำเนินการด้วยตัวเองตามต้องการ

 $ ('#U_PHOTO') }}});

เพิ่ม XHR ไปยังวิธี AJAX เพื่อควบคุมความคืบหน้าการอัปโหลด การแสดงและความคืบหน้าที่ซ่อนอยู่จะต้องดำเนินการด้วยตัวเอง

 XHR: function () {var myxhr = $ .ajaxsettings.xhr (); .attr ({value: e.loaded, สูงสุด: e.total,});}}, false);} return myxhr;}

 <Ederency> <roupId> Commons-io </groupId> <ratifactId> Commons-io </artifactId> <version> </version> </การพึ่งพา </artifactid> <version> 1.3.2 </version> </predency>

 <Bean ID = multipartResolver class = org.springframework.web.multipart.commonsmonsmonsmultipresolver />>>

โปรแกรมตัวอย่างไม่ได้ให้รหัสที่สอดคล้องกันสำหรับการตรวจสอบไฟล์การจัดเก็บและการประมวลผล

 @RequestMapping (value =/test/upload, method = requestmethod.post) @ResponseBodyPublic String อัปโหลด (@requestparam (u_photo) MultipartFile _photo) {system.out.println (u_photo =+u_photo.getsize ();

เช่น 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

หากคุณไม่พอใจกับแผนข้างต้นขอแนะนำให้ใช้โซลูชันต่อไปนี้:

อัพโหลดไฟล์ jQuery

ข้างต้นเป็นฟังก์ชั่นการอัปโหลดแบบอะซิงโครนัสของไฟล์การใช้งาน HTML5 ที่ Xiaobian แนะนำ ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!