H5 file asynchronous upload

php中世界最好的语言
Release: 2018-03-26 16:27:48
Original
2870 people have browsed it

This time I will bring you H5 file asynchronousupload, what are theprecautionsfor H5 file asynchronous upload, the following is a practical case, let's take a look.

1 Introduction

DevelopingFile uploadfunction is never a pleasant thing, especially asynchronous upload, I have used iframe and Flash uploading solutions, and they all feel very awkward. This article briefly introduces the use of Html5's FormData to implement asynchronous upload of files, and can also implement uploadprogress barand file size verification. The server uses the springMVC solution for processing.

2 Html code

Copy after login

3 JQuery upload

$("#submit-btn").on('click', function() { $.ajax({ url:"/test/upload", type:"post", data:new FormData($("#myForm").get(0)), //十分重要,不能省略 cache: false, processData: false, contentType: false, success: function () { alert("上传成功!"); } }); });
Copy after login

4 JQuery file size verification

The control of file size and correspondingbehaviorneeds to be handled by yourself as needed. This method is just an example method.

$('#u_photo').on('change', function() { var file = this.files[0]; if (file.size > 1024*1000) { alert('文件最大1M!') } });
Copy after login

5 JQuery progress bar

Add xhr to the ajax method to control the upload progress. The progress bar can also use the progress of html5. Use other progress bars. Displaying and hiding the progress bar needs to be handled by yourself. This method only briefly introduces the basic control of the progress bar.

xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; }
Copy after login

6 springMVC server

6.1 maven dependency

 commons-io commons-io 2.5   commons-fileupload commons-fileupload 1.3.2 
Copy after login

6.2servlet-context.xml

Copy after login

6.3 Controller

Sample program does not provide the corresponding code for file verification, storage and processing .

@RequestMapping(value="/test/upload",method = RequestMethod.POST) @ResponseBody public String upload(@RequestParam("u_photo") MultipartFile u_photo) { System.out.println("u_photo="+u_photo.getSize()); return "ok"; }
Copy after login

7 Compatibility

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

8 Recommended reading

If you are not satisfied with the above solution, it is recommended to use the following solution:

JQuery File Uploader

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What are the newly added tags in html5

How to use phonegap to find contacts

The above is the detailed content of H5 file asynchronous upload. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!