php ajax圖片檔案非同步上傳範例程式碼

jQuery.extend({
 createUploadIframe: function(id, uri)
 {
 // 建立框架> var frameId = 'jUploadFrame' id;
 var iframeHtml = 'if(window.ActiveXObject)<li>{</li>
<li>if(typeof uri== 'boolean'){</li>
<li>iframeHtml = ' src="' 'javascript:false' '"';</li>
<li> }</li>
<li>else if(typeof uri== 'string'){</li>
<li>iframeHtml = ' src="' uri '"';</li>
<li>} </li>
<li>}</li>
<li>iframeHtml = ' //> ' ; </li>
<li>jQuery(iframeHtml).appendTo(document.body);</li>
<li><p>return jQuery('#'frameId).get(0);</p></li>
<li> }, // bbs.it - home.org</li>
<li> createUploadForm: function(id, fileElementId)</li>
<li> {</li>
<li>//建立表單</li>
<li>var formId = 'jUploadForm' id;</li>
<li>var fileId = 'jUploadFile' id ; var form = jQuery('<form action="" method="POST" name="'formId'" id="'formId'" enctype="multipart/form-data"> form>'); 🎜> var oldElement = jQuery('#' fileElementId);<li>var newElement = jQuery(oldElement).clone();</li>
<li>jQuery(oldElement).attr('id', fileId) ;</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> //設定屬性</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>回傳表單;</li>
<li> },</li>
<li> ajaxFileUpload : function(s) {</li>
<li> // TODO 引入全域設置，允許客戶端針對所有請求修改它們，而不是超時</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> // 監視一組新的請求</li>
<li> if ( s.global && ! jQuery.active )</li>
<li>{</li>
<li>jQuery.event.trigger( "ajaxStart" );</li>
<li>} </li>
<li> var requestDone = false;</li>
<li> // 建立請求物件</li>
<li> var xml = {} </li>
<li> if ( s.global )</li>
<li> jQuery.event.trigger("ajaxSend", [xml, s]);</li>
<li> // 等待回應回傳</li>
<li> var uploadCallback = function(isTimeout)</li>
<li> {</li>
<li>var io = document.getElementById(frameId);</li>
<li>嘗試</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> }🎜> } (io.contentDocument)</li>
<li> {</li>
<li> xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;</li>
<li> xml.responseXML = io.contentDocument.Doum.</li>
<li> xml.responseXML = io.contentDocument.Doum. ?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> jQuery.handleError(s, xml, null, e);</li>
<li> }</li>
<li> if ( xml || isTimeout == "超時") </li>
<li>{ </li>
<li>requestDone = true;</li>
<li>var status;</li>
<li>try {</li>
<li> status = isTimeout != "逾時" ? "success" : "error";</li>
<li> //確保請求成功或未修改</li>
<li> if ( status != "error" )</li>
<li>{</li>
<li> // 處理資料（執行xml通過httpData，無論回調回呼）如何）</li>
<li> var data = jQuery.uploadHttpData( xml, s.dataType );    </li>
<li> // 如果指定了本地回調，則觸發其傳遞資料</li>
<li> if ( s.success )</li>
<li> s.success( data, status );</li>
<li> </li>
<li> // 觸發全域回呼回調</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>}</li>
<li><p>// 請求完成</p></li>
<li>if( s.global )</li>
<li> jQuery.event.trigger( "ajaxComplete", [xml, s] ); p></li>
<li> <p>// 處理全域AJAX 計數器</p>
</li>
<li>if ( s.global && ! --jQuery.active )</li>
<li> jQuery.event.trigger( "ajaxStop" );&gt ;</li>
<li><p>/ / 處理結果</p></li>
<li>if ( s.complete )</li>
<li> s.complete(xml, status);</li>
<li><p>jQuery(io).unbind()</p></li>
<li>setTimeout(function()</li>
<li>{ 試</li>
<li> {</li>
<li>jQuery(io).remove();</li>
<li>jQuery(form).remove (); </li>
<li><p> } catch(e ) </p></li>
<li> {</li>
<li>jQuery.handleError(s, xml, null, e);</li>
<li> }</li>
<li><p>}, 100)</p></li>
<li><p>xml = null</p></li>
<li><p> }</p></li>
<li> }</li>
<li> // 超時檢查器</li>
<li> if ( s.timeout > 0 ) </li>
<li>{</li>
<li> setTimeout(function(){</li>
<li>// 檢查請求是否仍在發生</li>
<li>if( !requestDone ) uploadCallback( "timeout" );</li>
<li> }, s.timeout);</li>
<li> }</li>
<li> 嘗試</li>
<li>{</li>
<li><p> var form = jQuery('#' formId);</p></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() ;</li>
<li><p> } catch(e) </p></li>
<li>{</li>
<li> jQuery.handleError(s, xml, null, e);</li>
<li> }</li>
<li><p>jQuery('#' frameId).load (uploadCallback );</p></li>
<li> return {abort: function () {}}; </li>
<li><p> }, p></p></li>
<li><p> uploadHttpData: function( r, type ) {</p></li>
<li> var data = !type;</li>
<li> data = type == "xml" ||資料？ r.responseXML : r.responseText;</li>
<li> // 如果類型是"script"，則在全域上下文中評估</li>
<li> if ( type == "script" )</li>
<li> jQuery.globalEval( data ) ;</li>
<li> // 如果使用JSON，則取得JavaScript 物件。 </li>
<li> if ( type == "json" )</li>
<li> eval( "data = " data );</li>
<li> // 評估html 內的腳本</li>
<li> if ( type == "html" )</li>
<li> jQuery ("<div>").html(data).evalScripts();<li><p> 回傳資料;</p></li>
<li> }</li>
<li>})</li>
<li>
</div>
<em onclick="copycode($('code_lld'));">複製程式碼</em>
</li>
</form>
</li>

複製程式碼

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

複製程式碼

 $file=$_FILES['upfile'];
 $name=rand(0,500000).dechex( rand(0,10000)).".jpg";
 move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//呼叫iframe父視窗的js 函數

複製程式碼

 Html5 Ajax 上傳檔案






 圖片


 瀏覽...

 上傳

複製程式碼

php程式碼：

if(isset($_FILES["myfile"]))
{
$ret = array( ) ;
$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$dir = 目錄名(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;file_exists || mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //單一檔案
{
$fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
move_uploaded_file($_FILES["myfile") ]["tmp_name"],$dir.$fileName);
$ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
echo json_encode($ret);
 }