Home > Web Front-end > JS Tutorial > jQuery does not use plug-ins and swf to achieve refresh-free file upload_jquery

jQuery does not use plug-ins and swf to achieve refresh-free file upload_jquery

WBOY
Release: 2016-05-16 16:28:14
Original
1416 people have browsed it

File uploading is a commonly used function on websites, such as the uploading function of attachments or pictures. There are many solutions. Today we introduce a method of uploading files without refreshing through jQuery.

First, we put a form on the page to upload files:

Copy code The code is as follows:

enctype="multipart/form-data" target="asyncTarget">
File:



Then, put an iframe in the page, and only refresh the iframe when uploading, not the entire web page:

Copy code The code is as follows:


Next use js to add functionality to the button:

Copy code The code is as follows:

<script><br> $(function () {<br>            $("#btnUpload").click(function () {<br>                 $("#myForm").submit();<br>         });<br> });<br> </script>

Submit the form when the button is clicked.

This solution can easily implement file upload without refreshing. Its implementation idea is: submit the form to an iframe, and other processing is the same as ordinary form submission.

What needs to be improved in this solution is how to determine when the upload is complete. Currently there is only one idea: monitor the readystate of the iframe through js, and then parse the content of the iframe.

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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template