Upload files without refreshing pages through Ajax-simulating IFRAME is extremely simple

Some time ago, I had a hard time uploading files through Ajax. It is certainly no problem to directly upload text information using $. Post. However, direct upload of images through $. Post is not feasible.

Later, I saw some solutions on the Internet, including the methods for encapsulating files uploaded via Ajax and using flash. Flash is indeed a good method, but not everyone will flash, and it is not easy to download the ready-made method for modification, and the file is relatively large.

Finally, we had to simulate IFRAME for implementation. The discovery is quite simple.

<IFRAME name = "ajaxupload" style = "display: none"> </iframe>

<Form name = "from1" id = "from1" method = "Post" Action = "url"Enctype = "multipart/form-Data" target ="Ajaxupload"> Here is the focus. The enctype attribute of the file to be uploaded is indispensable. The target value is changed to the value of IFRAME name.

<Table>

<Tr>

<TD> attachment: </TD>

<TD> <input type = "file" id = "document" name = "document"/> </TD>

</Tr>

</Table>

</Form>

 

Above is html

Write down JS belowCodeI use jquery, so it is essential to load the jquery library when using it.

$ (Function (){

If ($. browser. MSIE ){

Window. form1.submit ();} else {

$ ("# Form1"). Submit ();}

});

// Here is a browser version judgment, because IE is a non-compliant browser, especially IE6. IE6 does not directly support $ ("# idname"). Submit.

What should I do on the server end? I have to return a value. Direct submit cannot return a value.

Public void upload ()

{

Httppostedbase FF = request. Files ["document"]; // you can obtain the uploaded file stream or use the index value to indicate multiple files.

String filename = system. datetime. Now + ff. filename. tostring (); // The obtained file name does not have a suffix. Therefore, you need to retrieve the extension name of the file to save the file. I will not write too much here, just to describe this idea.

Try {

Saveas (documentpath + filename + extendtionname );

Response. Write ("<SCRIPT type = 'text/JavaScript 'type = 'language'> parent. Window. callbackmethod ('uploaded successfully'); </scrpt> ");

}

Catch

{

Response. write ("<SCRIPT type = 'text/JavaScript 'Type = 'language'> parent. window. callbackmethod ('upload failed'); </scrpt> "); // parent. window. methodname (); this is the method for js to call the parent page. Because we now simulate an IFRAME to upload files, this IFRAME serves as an intermediate station. After you Click Upload on the parent page, the page document will be circulated to IFRAME through target, and then uploaded to the server for processing. After the server responds, it is displayed in IFRAME instead of displaying the result directly on the parent page. This may be an alert () dialog box that prompts you. If so, you can skip the parent PAGE method. If you want to enrich the content of this prompt, for example, a blue dialog box similar to Renren is displayed.

}

}

The simulated IFRAME is actually a partial update of the page, but the IFRAME in the page has no content and is still not displayed, so refreshing it does not affect the entire page.