JQuery does not use plug ins and SWF to achieve no refreshing file upload

  • 2020-03-30 04:33:52
  • OfStack

File upload is a common function of the website, such as the upload function of attachments or pictures, there are many solutions, we introduce a file upload method without refreshing through jQuery today.

First, we put a form in the page to upload the file:


<form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx"
    enctype="multipart/form-data" target="asyncTarget">
    <span> File: </span>
    <input type="file" name="myFile" />
</form>
<input type="button" value=" upload " id="btnUpload" />

Then, put an iframe on the page and refresh only the iframe when you upload, not the entire page:


<iframe name="asyncTarget" style="display: none;"></iframe>

Next, js is used to add functionality to the button:


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

When the button is clicked, the form is submitted.

This scheme can be easily implemented without refreshing the file upload. The idea is to submit the form to an iframe, and the rest is handled just like a normal form submission.

The solution to be perfected is how to judge the completion of the upload. Currently, there is only one idea: listen to the readystate of the iframe through js, and then parse the contents of the iframe.


Related articles: