File upload without refreshing Spokesperson appointment documents News Network draft documents Document No. 1 press release

No refresh file upload

ajax’s FormData object completes no refresh operation

ajax level 2 standard can operate on files, but only supports new browsers (not compatible with lower versions of IE), and is H5 standard

Notes:

1. Form size

   

2. Single file upload size

   

   Practical operation:

3. Write a form, but it should be noted that the enctype attribute is not set for the form.

   

4. Bind a click event to the upload button and complete the ajax submission of the uploaded file

   

5. Use FormData to collect data in the form (normal data + upload domain)

   

6. Use the onprogress handle of the upload member of the ajax object to monitor the file upload situation

   1. Set an upload progress bar display box

   

   b) css settings

   

   

   c) Set up monitoring file upload events

   

7. To monitor ajax operations through onreadystatechange

   

8. Send an ajax request (Note: You do not need to set the ajax request header when using FormData to complete data upload)

   

9. Use the event source (uploaded file) in onprogress to display progress

   

10. The server data.php file implements uploaded file processing

    

    iframe enables refresh-free uploading

11. Create an index.php file and set the upload domain

    

    

    Technical point 1: You need to set the window opened for form submission to an iframe defined by yourself

    Technical point 2: The generated image needs to be processed in the data.php file, and then the image URL address is returned. Use top to get the window to open the current iframe, and modify the src attribute of the img tag.

    2. data.php completes saving and returning images

    

The above introduces file upload without refreshing, including file upload and new article content. I hope it will be helpful to friends who are interested in PHP tutorials.