当前位置：Gxlcms > PHP教程 > php+ajax图片文件异步上传示例代码

php+ajax图片文件异步上传示例代码

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

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

方法三，原生态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);
}
?>

php+ajax图片文件异步上传示例代码

人气教程排行