Ajax Image Upload Method

Provides various official and user-released code examples. For code reference, you are welcome to exchange and learn about the official documentation, which is just an example of regular upload. Ajax uploads many online materials
Error. A Code passed the test is reprinted for your reference.
Reference: http://borissun.iteye.com/blog/1151350
-----------------------------------------------------
Because ajax cannot send post requests with files. Therefore, iframe is required for ajax.

Html code

The action in the form is normally used to process file uploads. Enter a hidden iframe for target.
After the form is submitted, the file is uploaded, but the page is not refreshed, because the page is refreshed as a hidden iframe after the form is submitted, therefore, the user sees the same effect as ajax processing.

Now we can see the same effect as ajax, but ajax has a returned value. But now we refresh the iframe page, but there is no ajax return value. I don't know whether the operation is successful or failed. Therefore, you need to write a js callback method in the page, and then call this callback method after the upload operation is processed successfully.

This example is php file processing. The same applies to other languages.
Php code
Public function uploadImg ()
{
Try {
If ($ _ FILES ["AidImg"] ["size"]! = 0)
{
$ UploadPath = MB_ROOT_DIR. "/pic ";
If ($ _ FILES ["AidImg"] ["size"] <1024*1024*2 ){
If ($ _ FILES ["AidImg"] ["error"]> 0 ){
Error ($ _ FILES ["AidImg"] ["error"], "index. php/Campaign/campaignPublish ");
} Else {
$ Suffix = substr ($ _ FILES ["AidImg"] ["name"], strrpos ($ _ FILES ["AidImg"] ["name"], '. ') + 1 );
$ ImgDate = date ("YmdHis ");
$ Name = $ imgDate. rand ("1000", "9999"). ".". $ suffix;
If (! Is_dir ($ uploadPath )){
Mkdir ($ uploadPath );
}
If (move_uploaded_file ($ _ FILES ["AidImg"] ["tmp_name"], $ uploadPath. "/". $ name )){
$ Pf = new IBPostFile (UPLOAD_IMAGE_URL, UPLOAD_IMAGE_PORT );
$ Pf-> setFile ("AidImg", $ uploadPath. "/". $ name );
$ Pf-> sendRequest ();
$ ImgUrl = $ pf-> getResponse ();
}
}
} Else {
Echo "script parent. callback ('image size cannot exceed 2 mbs', false) script";
Return;
}
}
}
Catch (Exception $ e)
{
Echo "script parent. callback ('image upload failed', false) script";
Return;
}
Echo "script parent. callback ('$ imgurl', true) script";
}


Echo "script parent. callback ('image upload failed', false) script";
This statement calls the callback method of the iframe parent page. Some information is passed into the callback method as a parameter.


Javascript code
Function uploadImg ()
{
Var names = $ ("# AidImg"). val (). split (".");
If (names [1]! = "Gif" & names [1]! = "GIF" & names [1]! = "Jpg" & names [1]! = "JPG" & names [1]! = "Png" & names [1]! = "PNG ")
{
$ ("# ImgError" developer.html ("

"+" The Poster must be in gif, jpg, and png format ");
$ ("# ImgError"). show ();
Return;
}
$ ("# FormImg"). submit ();
}

Function callback (message, success)
{
If (success = false)
{
$ ("# ImgError" developer.html ("

"+ Message );
$ ("# ImgError"). show ();
}
Else {
$ ("# ImgError"). hide ();
Var paths = message. split ("/");
$ ("# Img"). attr ("src", message );
$ ("Input [name = 'imgurl']"). val (paths [paths. length-1]);
}
}


Here is the page callback method, which accepts the results returned after the uploaded image is processed.

In this way, iframe is used to simulate ajax to upload files.

AD: truly free, domain name + VM + enterprise mailbox = 0 RMB