PHP+ajax image file asynchronous upload sample code-PHP Tutorial-php.cn

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">