"Go" jquery plugin ajaxfileupload asynchronous upload file (PHP version)

A few days ago in the mobile phone to do an asynchronous upload image function, usually with more jquery image upload plugin is uploadify this plug-in, the effect is very good, but because the phone does not support Flash, so have to find a file upload plugin to use. Later found ajaxfileupload This plugin is very good, so use this plugin to do asynchronous upload file effect. There are many articles on the internet for the use of Ajaxfileupload plug-ins, but I found that there is no PHP version, so this time the server side of the processing using PHP language to handle.

First, the Ajaxfileupload plug-in syntax parameters to explain

Principle: Ajaxfileupload is implemented by monitoring the OnLoad method of the IFrame, and when processing from the server is done, the OnLoad event that triggers the IFRAME invokes its binding method. Gets the data body returned by the server in the iframe in the bound method (supported plain text, Json,xml,script, HTML)

Syntax: $.ajaxfileupload ([options])

Parameter description:

1,url upload handler address, which is the address I send to the server to process the upload.
2,fileelementid the ID of the file domain to be uploaded, i.e. the ID of <input type= "file" id= "file" >.
3,secureuri whether secure commits are enabled, false by default.
4,datatype the data type returned by the server. Can be a xml,script,json,html. If you do not fill in, jquery will automatically determine.
5,success the processing function that is executed automatically after the commit succeeds, the parameter data is the server return.
6,error the processing function that failed to submit the automatic execution.
7,data custom parameters. This is useful, for example, when you upload a picture and want to pass the image name together, you can use this parameter to achieve.
8,type when you want to submit a custom parameter, this parameter is set to post

Second, let's look at how to use

1, first introduce ajaxfileupload this plugin.

<script src= "Jquery-1.11.1.js" type= "Text/javascript" ></script><script src= "Ajaxfileupload.js" type = "Text/javascript" ></script>

Here I use is jq1.11.1 version, online has said JQ version and ajaxfileupload version to correspond will not have abnormal error, anyway I now this no error.

　　　

2, paste the code of the HTML.

        <div data-role= "Fieldcontain" class= "Upload-box" >                <label for= "Id_photos" ><span class= "Red" >* </span> your valid passport photo:</label>                    <input type= "file" id= "Id_photos" name= "Id_photos" value= "Upload" style= " Filter:alpha (opacity=10);-moz-opacity:10;opacity:10; "/>                            <p style=" Margin-top:0.5em;color: #999; font-size:11pt; " > Description: Please upload a picture of your hand-held document, making sure that the document information in the photo is clear and readable. </p>        </div>        <div class= "Id_photos" >                    </div>                

Here the main is <input type= "file" id= "Id_photos" name= "Id_photos" value= "upload" > This code, the other without tube, because here I was on the mobile side, The Jquerymobile plugin is used.

　　

3, to the JS code for processing.

$ (document). Bind (' Pageinit ', function () {    //Photo asynchronously uploads    $ (' #id_photos '). Change (function () {  ///Use the Change event here This event is triggered when a good picture is selected to open, close the window        $.ajaxfileupload ({        URL: '/uploader/',   //script path for processing pictures        type: ' Post ',       //Submit in the way        Secureuri:false,   //whether to enable secure commit        Fileelementid: ' Id_photos ',     //file control ID        dataType: ' JSON ',　　 //  The data type returned by the server              success:function (data, status) {  ////Submit successfully after the execution of the handler function            if (1! = data.total) return;　　Because this refers to the permission to upload a single picture, so the number if not 1, that is the wrong            var url = data.files[0].path;            $ ('. Id_photos '). empty ();            The effect here is: When the successful upload will return a JSON data, there is a URL, take out the URL assigned to the IMG tag, and then appended to the. Id_photos class shows the picture            $ ('. Id_photos '). Append (' 
Here I have a basic comment on the code of each line to make it easy for everyone to understand. The process is to upload the image to uploader.php, processing the successful return of the JSON data, and then remove the URL value in the JSON, assign it to the IMG tag, and then append the IMG tag to the page display.
Here I enclose the data returned by JSON:
{    "total": 1,    "Success": 1,    "files": [        {            "SrcName": "3.jpg",            "error": 0,            "size": 10715,            "type": "Image/jpeg", "            Success": True,            "path": "http://m.kellyblog.com/upload/20150528/ 857f4a35664b4a665e713322306d73b2.0x124x126.jpg ",            " width ": 124,            " height ": 126        }    ]}
The pre-upload HTML page is like this:
After the successful asynchronous upload, the HTML page effect is like this:
　　
4. See how PHP is handled
  1 class Uploadercontroller extends Xxxx_controller {2 Public Function index () {3 $files = array ();    4 $success = 0;  User statistics How many images were uploaded successfully 5 6 foreach ($_files as $item) {7 $index = count ($files);    8 9 $files [$index] [' srcname '] = $item [' name '];    The original name of the uploaded image is $files [$index] [' error '] = $item [' ERROR '];        The error code associated with the file upload $files [$index] [' size '] = $item [' Size '];        The size of the uploaded file, in bytes $files [$index] [' type '] = $item [' type '];            The MIME type of the file requires the browser to provide support for that information, such as "Image/gif" $files [$index] [' success '] = false;                This is used to flag whether the image was uploaded successfully $files [$index] [' path '] = '; Save Picture Path 15 16//Receive process there is no error if ($item [' ERROR ']! = 0) Continue; 18//Determine if the image can be uploaded (!is_uploaded_file ($item [' tmp_name ')]) {$files [$index] [ER Ror '] = 8000; Continue; 22} 23             Extension $extension = ';             if (strcmp ($item [' type '], ' image/jpeg ') = = 0) {$extension = '. jpg '; 27} 28              else if (strcmp ($item [' type '], ' image/png ') = = 0) {$extension = '. png '; 30} 31 else if (strcmp ($item [' type '], ' image/gif ') = = 0) {$extension = '. gif '; 33} 3 4 else {35//if type is not the above three, we will intercept the judgment from the original name of the image to obtain (in strict) the $SUBSTR = STRRCHR ($item [' name '], '. '); PNS if (FALSE = = $substr) {$files [$index] [' error '] = 8002; Ntinue; 40} 41 42//Gets the extension of the meta-name, and then assigns the corresponding value to type by extension (strcasecmp ($substr, '. JP G ') = = 0 | | STRCASECMP ($substr, '. jpeg ') = = 0 | | STRCASECMP ($substr, '. jfif ') = = 0 | | STRCASECMP ($substr, '. Jpe ') = = 0) {$files [$index] [' type '] = ' image/jpeg '; 45                 } strcasecmp ($substr, '. png ') = = 0) {$files [$index] [' t Ype '] = ' image/png '; (STRCASECMP ($substr, '. gif ') = = 0) {$files [$index] [ ' type '] = ' image/gif ';                     ($index [' error '] = 8003; 54 $files Continue $extension = $substr; 57} 58 59//Encrypt temporary file names for subsequent generation of complex new filenames $MD 5 = md5_file ($item [' tmp_name ']); 61//Get the size of the picture $imageInfo = getimagesize ($item [' tmp_name ']); $rawImageWidth = $imageInfo [0]; $rawImageHeight = $imageInfo [1];             65 66//Set the image upload path, placed in the upload folder, in the month and day to generate folder classification storage,//rtrim (Base_url (), '/') is actually the root directory of the site, we handle 68 $path = RTrim (Base_url (), '/'). '/upload/'. Date (' Ymd '). ‘/‘;  69//Make sure the directory is writable 70           Ensure_writable_dir ($path); 71//FileName $name = "$md 5.0x{$rawImageWidth}x{$rawImageHeight} {$extension}"; 73//Add picture file does not change, that is, there is no need to repeat the upload, does not exist upload the $ret = file_exists ($path. $name)? True:move_uploaded_file ($item [' Tmp_name '], $serverPath. $name);             if ($ret = = = False) {$files [$index] [' error '] = 8004; continue; 78        }, else {$files [$index] [' path '] = $path. $name;            Save picture Path Bayi $files [$index] [' success '] = true;    Image upload Success Logo $files [$index] [' width '] = $rawImageWidth;    Image width $files [$index] [' height '] = $rawImageHeight;    Picture height $success + +; Success +1 85} 86} 87 88//The picture has been returned in JSON form to the JS processing page, where you can change to your own JSON return processing code echo JSON_ENC Ode (Array (+ "Total" = count ($files), Success ' $Success, the "files '" = $files, 93)); 94} 95} 96/********************************* Split *************************************************/97//Here I enclose ensure_     Code for the Writable_dir () function 98/** 99 * Ensure that the folder exists and can be written to *101 * @param string $dir 102 */103 function Ensure_writable_dir ($dir) {104 if (!file_exists ($dir)) {mkdir ($dir, 0766, True); 106 chmod ($dir, 0766); 107 chmod ($dir, 0777) ; 108}109 Else if (!is_writable ($dir)) {chmod ($dir, 0766); 111 chmod ($dir, 0777); !is_writable ($dir)) {113 throw new Filesystemexception ("Directory $dir not Writable"); 114}115}116}
The code is basically added to the comments, easy to understand, although the use of PHP processing image upload, but you understand the upload program code to deal with the logic of the idea, the idea for use in. NET or Java is still possible.
The above is the entire analysis process of uploading files asynchronously using the jquery plugin ajaxfileupload.
Online find this ajaxfileupload plug-in comparison miscellaneous, so here to a link everyone to download:
Http://pan.baidu.com/s/1gdF5CdH
"Go" jquery plugin ajaxfileupload asynchronous upload file (PHP version)