php ajax圖片檔案非同步上傳範例程式碼-php教程-PHP中文網

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>

過程： (1)前端檔案的程式碼：test.php

}

} }

複製程式碼

對應的HTML為：

上傳

複製程式碼

複製程式碼
這樣客戶端就完成了。

(2)在伺服器端的doajaxfileupload.php 這裡為了偵測是否真正的傳值過來了，你可以把它存起來了。

$file_infor = var_export($_FILES,true);

file_put_contents("d:file_infor.php".$file_infor); 🎜>

複製程式碼
這樣打來剛產生的file_infor.php檔案時，又看到了相關的資訊了：

array(

'name'=>'lamp.jpg', 'type'=>'image/pjpeg', 'tmp_name'=>'c:windowstempphpFA.tmp',

'錯誤'=>0, '大小'=>3127) 複製代碼

當然，真正的處理類於這樣的：

$upFilePath = "d:/";
$ok=@move_uploaded_file($_FILES['img']['img']['img'][ 'tmp_name'],$upFilePath);
if($ok === FALSE){
echo json_encode('file_infor'=>'上傳失敗');
}else{
echo json_encode');
}else{
echo json_encode ('file_infor'=>'上傳成功');

}

複製程式碼

方法二，利用iframe框架上傳圖片 html代碼:

複製程式碼

index.js檔案：

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

$("#msg").append(im);

}

複製程式碼

upload.php檔案：

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

echo "<script>parent.stopSend('$name')</script>";

複製程式碼

方法三，原生態ajax檔案上傳

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);
}

複製程式碼