PHP+ajax image file asynchronous upload sample code

jQuery.extend({
    createUploadIframe: function(id, uri)
 {
 //create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = 'if(window.ActiveXObject)<li>{<li>if(typeof uri== 'boolean'){<li>iframeHtml += ' src="' + 'javascript:false' + '"';<li>}<li>else if(typeof uri== 'string'){<li>iframeHtml += ' src="' + uri + '"';<li>} <li>}<li>iframeHtml += ' />';</li>
<li>jQuery(iframeHtml).appendTo(document.body);</p></li>
<li><p>return jQuery('#' + frameId).get(0);</li>
<li>    }, // bbs.it-home.org</li>
<li>    createUploadForm: function(id, fileElementId)</li>
<li> {</li>
<li>//create form </li>
<li>var formId = 'jUploadForm' + id;</li>
<li>var fileId = 'jUploadFile' + id;</li>
<li>var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); </li>
<li>var oldElement = jQuery('#' + fileElementId);</li>
<li>var newElement = jQuery(oldElement).clone();</li>
<li>jQuery(oldElement).attr('id', fileId);</li>
<li>jQuery(oldElement).before(newElement);</li>
<li>jQuery(oldElement).appendTo(form);</li>
<li>//添加参数支持</li>
<li>if(data){</li>
<li>$.each(data,function(key,value){</li>
<li> $("<input type='hidden' name='"+key+"' value='"+value+"'/>").appendTo(form);</li>
<li>})</li>
<li>}</li>
<li>//set attributes</li>
<li>jQuery(form).css('position', 'absolute');</li>
<li>jQuery(form).css('top', '-1200px');</li>
<li>jQuery(form).css('left', '-1200px');</li>
<li>jQuery(form).appendTo('body');</li>
<li>return form;</li>
<li>    },</p></li>
<li><p>    ajaxFileUpload: function(s) {</li>
<li>        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout</li>
<li>        s = jQuery.extend({}, jQuery.ajaxSettings, s);</li>
<li>        var id = new Date().getTime()        </li>
<li>var form = jQuery.createUploadForm(id, s.fileElementId,s.data);</li>
<li>var io = jQuery.createUploadIframe(id, s.secureuri);</li>
<li>var frameId = 'jUploadFrame' + id;</li>
<li>var formId = 'jUploadForm' + id;</li>
<li>        // Watch for a new set of requests</li>
<li>        if ( s.global && ! jQuery.active++ )</li>
<li>{</li>
<li>jQuery.event.trigger( "ajaxStart" );</li>
<li>}            </li>
<li>        var requestDone = false;</li>
<li>        // Create the request object</li>
<li>        var xml = {}   </li>
<li>        if ( s.global )</li>
<li>            jQuery.event.trigger("ajaxSend", [xml, s]);</li>
<li>        // Wait for a response to come back</li>
<li>        var uploadCallback = function(isTimeout)</li>
<li>{</li>
<li>var io = document.getElementById(frameId);</li>
<li>            try </li>
<li>{ </li>
<li> if(io.contentWindow)</li>
<li> {</li>
<li> xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;</li>
<li>  xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;</li>
<li> </li>
<li> }else if(io.contentDocument)</li>
<li> {</li>
<li> xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;</li>
<li> xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;</li>
<li> }</li>
<li>            }catch(e)</li>
<li>{</li>
<li> jQuery.handleError(s, xml, null, e);</li>
<li>}</li>
<li>            if ( xml || isTimeout == "timeout") </li>
<li>{ </li>
<li>requestDone = true;</li>
<li>var status;</li>
<li>try {</li>
<li>    status = isTimeout != "timeout" ? "success" : "error";</li>
<li>    // Make sure that the request was successful or notmodified</li>
<li>    if ( status != "error" )</li>
<li>{</li>
<li>        // process the data (runs the xml through httpData regardless of callback)</li>
<li>        var data = jQuery.uploadHttpData( xml, s.dataType );    </li>
<li>        // If a local callback was specified, fire it and pass it the data</li>
<li>        if ( s.success )</li>
<li>            s.success( data, status );</li>
<li>    </li>
<li>        // Fire the global callback</li>
<li>        if( s.global )</li>
<li>            jQuery.event.trigger( "ajaxSuccess", [xml, s] );</li>
<li>    } else</li>
<li>        jQuery.handleError(s, xml, status);</li>
<li>} catch(e) </li>
<li> {</li>
<li>    status = "error";</li>
<li>    jQuery.handleError(s, xml, status, e);</li>
<li>}</p></li>
<li><p>// The request was completed</li>
<li>if( s.global )</li>
<li>    jQuery.event.trigger( "ajaxComplete", [xml, s] );</p></li>
<li><p>// Handle the global AJAX counter</li>
<li>if ( s.global && ! --jQuery.active )</li>
<li>    jQuery.event.trigger( "ajaxStop" );</p></li>
<li><p>// Process result</li>
<li>if ( s.complete )</li>
<li>    s.complete(xml, status);</p></li>
<li><p>jQuery(io).unbind()</p></li>
<li><p>setTimeout(function()</li>
<li>{ try </li>
<li> {</li>
<li>jQuery(io).remove();</li>
<li>jQuery(form).remove(); </p></li>
<li><p> } catch(e) </li>
<li> {</li>
<li>jQuery.handleError(s, xml, null, e);</li>
<li> }</p></li>
<li><p>}, 100)</p></li>
<li><p>xml = null</p></li>
<li><p>            }</li>
<li>        }</li>
<li>        // Timeout checker</li>
<li>        if ( s.timeout > 0 ) </li>
<li>{</li>
<li>            setTimeout(function(){</li>
<li>// Check to see if the request is still happening</li>
<li>if( !requestDone ) uploadCallback( "timeout" );</li>
<li>            }, s.timeout);</li>
<li>        }</li>
<li>        try </li>
<li>{</p></li>
<li><p>var form = jQuery('#' + formId);</li>
<li>jQuery(form).attr('action', s.url);</li>
<li>jQuery(form).attr('method', 'POST');</li>
<li>jQuery(form).attr('target', frameId);</li>
<li>            if(form.encoding)</li>
<li>{</li>
<li> jQuery(form).attr('encoding', 'multipart/form-data');      </li>
<li>            }</li>
<li>            else</li>
<li>{ </li>
<li> jQuery(form).attr('enctype', 'multipart/form-data');</li>
<li>            }</li>
<li>            jQuery(form).submit();</p></li>
<li><p>        } catch(e) </li>
<li>{</li>
<li>            jQuery.handleError(s, xml, null, e);</li>
<li>        }</p></li>
<li><p>jQuery('#' + frameId).load(uploadCallback );</li>
<li>        return {abort: function () {}}; </p></li>
<li><p>    },</p></li>
<li><p>    uploadHttpData: function( r, type ) {</li>
<li>        var data = !type;</li>
<li>        data = type == "xml" || data ? r.responseXML : r.responseText;</li>
<li>        // If the type is "script", eval it in global context</li>
<li>        if ( type == "script" )</li>
<li>            jQuery.globalEval( data );</li>
<li>        // Get the JavaScript object, if JSON is used.</li>
<li>        if ( type == "json" )</li>
<li>            eval( "data = " + data );</li>
<li>        // evaluate scripts within html</li>
<li>        if ( type == "html" )</li>
<li>            jQuery("<div>").html(data).evalScripts();</p></li>
<li><p>        return data;</li>
<li>    }</li>
<li>})</p></li>
<li>
</ol></div>
<em onclick="copycode($('code_lld'));">复制代码</em>
</div>
<p>过程：
(1 )前端文件的代码： test.php
 </p>
<div class="blockcode">
<div id="code_KUI"><ol>
<li>
<li><script type="text/javascript" src="jquery.js"></script> </li>
<li> <script type="text/javascript" src="ajaxfileupload.js"></script></li>
<li> <script type="text/javascript"></li>
<li> function ajaxFileUpload()</li>
<li>{</li>
<li>$.ajaxFileUpload</li>
<li>(</li>
<li>  {</li>
<li> url:'doajaxfileupload.php', //你处理上传文件的服务端</li>
<li> secureuri:false,</li>
<li> fileElementId:'img',</li>
<li> dataType: 'json',</li>
<li> success: function (data)</li>
<li> {</li>
<li>alert(data.file_infor);</li>
<li> }</li>
<li> }</li>
<li> )</li>
<li>  return false;</li>
<li>  } </li>
<li>  </script></li>
<li> </li>
</ol></div>
<em onclick="copycode($('code_KUI'));">复制代码</em>
</div>
<p>相应的HTML为：
 </p>
<div class="blockcode">
<div id="code_FLd"><ol>
<li>
<li><input id="img" type="file" size="45" name="img" class="input"></li>
<li>  <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></li>
<li> </li>
</ol></div>
<em onclick="copycode($('code_FLd'));">复制代码</em>
</div>
<p>这样客户端就完成了。</p>
<p>(2) 在服务器端的doajaxfileupload.php
此处为了简便的检测是否真正的传值过来了，你可以将它存起来了。
 </p>
<div class="blockcode">
<div id="code_f1K"><ol>
<li>
<li>$file_infor = var_export($_FILES,true);</li>
<li> file_put_contents("d:file_infor.php".$file_infor);</li>
<li> </li>
</ol></div>
<em onclick="copycode($('code_f1K'));">复制代码</em>
</div>
<p>这样打来刚生成的file_infor.php文件时，又看到了熟悉的信息了：
 </p>
<div class="blockcode">
<div id="code_h5h"><ol>
<li>
<li>array(</li>
<li> 'name'=>'lamp.jpg',</li>
<li> 'type'=>'image/pjpeg',</li>
<li> 'tmp_name'=>'c:windowstempphpFA.tmp',</li>
<li> 'error'=>0,</li>
<li> 'size'=>3127</li>
<li>)</li>
<li> </li>
</ol></div>
<em onclick="copycode($('code_h5h'));">复制代码</em>
</div>
<p>Of course, the real processing is similar to this:
 </p>
<div class="blockcode">
<div id="code_EiQ"><ol>
<li>
<li><?php<li> $upFilePath = "d://";<li> $ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);<li>if($ok = == FALSE){<li> echo json_encode('file_infor'=>'Upload failed');</li>
<li>}else{</li>
<li> echo json_encode('file_infor'=>'Upload successful');</li>
<li>}</li>
<li>?></li>
</ol></div>
<em onclick="copycode($('code_EiQ'));"> Copy the code </em>
</div>
<p>Method 2, use the iframe framework to upload images
html code:
 </p>
<div class="blockcode">
<div id="code_ImA"><ol>
<li>
<li><div class="frm"></li>
<li> <form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype=" multipart/form-data"></li>
<li> <input type="file" id="upload_file" name="upfile"></li>
<li> </form></li>
<li> <iframe src="" width="0" height= "0" style="display:none;" name="tarframe">

Copy the code

index.js file:

$(function(){
 $("#upload_file").change(function(){
 $("#uploadFrom").submit();
 });
});
function stopSend(str){
 var im="";
 $("#msg").append(im);
}

upload.php file:

 $file=$_FILES['upfile'];
 $name=rand(0,500000).dechex(rand(0,10000)).".jpg";
 move_uploaded_file ($file['tmp_name'],"upload/images/".$name);
//Call the js function of the iframe parent window
 echo "How to use cURL to implement Get and Post requests in PHPHow to use cURL to implement Get and Post requests in PHPHow to use cURL to implement Get and Post requests in PHPHow to use cURL to implement Get and Post requests in PHPAll expression symbols in regular expressions (summary)

• Home

• Course

• Q&A

• My

• Home
• Course
• Article
• Q&A
• Dictionary
• Manual
• Download
• Topic

Home

Article

Q&A

Course

Topic

Download

Game

Dictionary

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）