PHP Server File Manager Development Summary (10): Ajax file upload with jquery and iframe

The previous section discussed file downloads, and this section continues to discuss file uploads.

As we all know, the simplest way to upload files on the front end is to use the file control <input type= "file"/>. However, if we need to upload the process is Ajax, that is, the upload process does not refresh the page, only feedback the required information, it needs a more sophisticated design.

The first is the upload file image link:

<li><a href= "#" title= "Upload" onclick= "Onuploadfile ()" ></a></li>

The client needs to use jQueryUI to provide the user with a dialog box to upload the file, and give the user feedback on the upload results. The onuploadfile response is given below:

function Onuploadfile () {$ (' #dialogUploadFile '). Dialog ({height: ' auto ', Width: ' Auto ', position:{my: ' Center ', at: ' Center ', collision: ' Fit '},modal:false,draggable:true,resizable:true,title: ' New File ', Show: ' Slide ', hide: ' Explode ' , Buttons:{ok:function () {$ ("#frmUploadFile"). Submit (); SetTimeout ("$.post" (' query.php ', {act: ' refresh '}, Function (        Data) {$ (' #spanDirTable '). HTML (data);    $ (' #dialogUploadFile '). Dialog (' Close ');        }),},cancel:function () {$ (this). dialog ("Close"); }}});}

Here is a change, the submission of the form is directly using submit (), and the subsequent Ajax request uses settimeout for the delay, so that the server has enough time to receive and process the uploaded file.

The corresponding "raw materials" are also changed:

<div id= "Dialoguploadfile" style= "Display:none" ><form id= "Frmuploadfile" method= "post" target= "FrameAlert" action= "query.php" enctype= "Multipart/form-data" ><input type= "hidden" name= "act" value= "upload"/>select File to upload:<input type= "file" Name= "NewFile"/></form></div><iframe id= "Framealert" style= " Display:none "></iframe>

This refers to a <iframe> as the target of the form. In this way, we can feedback the processing result of the uploaded file to the corresponding frame, and pop up the alert prompt.

The corresponding PHP processing:

            case  "Upload":                 echo  "
PHP uses the $_files object to access the file information uploaded by the form, where $_files[$fileElemName] ["Tmp_name"] holds the temporary path of the uploaded file, $_files[$fileElemName ["Name"] The upload file name is stored. You can use the Move_uploaded_file function to move uploaded files to the target path.
Notice that the 
Specific effects:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/59/CB/wKioL1Tli-GgxG-2AAKURdyMXCg578.jpg "title=" PHP File Manager 17.png "alt=" Wkiol1tli-ggxg-2aakurdymxcg578.jpg "/>
This article is from the "Accplayer Small Place" blog, make sure to keep this source http://accplaystation.blog.51cto.com/9917407/1614871
PHP Server File Manager Development Summary (10): Ajax file upload with jquery and iframe