php+ajax图片文件异步上传示例代码 -tutoriel php-php.cn

jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
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>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> },</li> <li> 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>}</li> <li>// The request was completed</li> <li>if( s.global )</li> <li> jQuery.event.trigger( "ajaxComplete", [xml, s] );</li> <li>// Handle the global AJAX counter</li> <li>if ( s.global && ! --jQuery.active )</li> <li> jQuery.event.trigger( "ajaxStop" );</li> <li>// Process result</li> <li>if ( s.complete )</li> <li> s.complete(xml, status);</li> <li>jQuery(io).unbind()</li> <li>setTimeout(function()</li> <li>{ try </li> <li> {</li> <li>jQuery(io).remove();</li> <li>jQuery(form).remove(); </li> <li> } catch(e) </li> <li> {</li> <li>jQuery.handleError(s, xml, null, e);</li> <li> }</li> <li>}, 100)</li> <li>xml = null</li> <li> }</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>{</li> <li>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();</li> <li> } catch(e) </li> <li>{</li> <li> jQuery.handleError(s, xml, null, e);</li> <li> }</li> <li>jQuery('#' + frameId).load(uploadCallback );</li> <li> return {abort: function () {}}; </li> <li> },</li> <li> 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();<li> return data;</li> <li> }</li> <li>})</li> <li> </div> 复制代码 </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',
'error'=>0,
'size'=>3127
)

复制代码

当然，真正的处理类于这样的：

$upFilePath = "d:/";
$ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
if($ok === FALSE){
echo json_encode('file_infor'=>'上传失败');
}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 = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //single file
{
$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);
}
?>

复制代码