jquery.extend({
createuploadiframe: function(id, uri) { //create frame var frameid = 'juploadframe' + id; var iframehtml = 'if(window.activexobject){if(typeof uri== 'boolean'){iframehtml += ' src=' + 'javascript:false' + '';}else if(typeof uri== 'string'){iframehtml += ' src=' + uri + '';} }iframehtml += ' />';jquery(iframehtml).appendto(document.body);return jquery('#' + frameid).get(0);
}, // bbs.it-home.org createuploadform: function(id, fileelementid) {//create form var formid = 'juploadform' + id;var fileid = 'juploadfile' + id;var form = jquery(''); var oldelement = jquery('#' + fileelementid);var newelement = jquery(oldelement).clone();jquery(oldelement).attr('id', fileid);jquery(oldelement).before(newelement);jquery(oldelement).appendto(form);//添加参数支持if(data){$.each(data,function(key,value){ $().appendto(form);})}//set attributesjquery(form).css('position', 'absolute');jquery(form).css('top', '-1200px');jquery(form).css('left', '-1200px');jquery(form).appendto('body');return form; }, ajaxfileupload: function(s) {
// todo introduce global settings, allowing the client to modify them for all requests, not only timeout s = jquery.extend({}, jquery.ajaxsettings, s); var id = new date().gettime() var form = jquery.createuploadform(id, s.fileelementid,s.data);var io = jquery.createuploadiframe(id, s.secureuri);var frameid = 'juploadframe' + id;var formid = 'juploadform' + id; // watch for a new set of requests if ( s.global && ! jquery.active++ ){jquery.event.trigger( ajaxstart );} var requestdone = false; // create the request object var xml = {} if ( s.global ) jquery.event.trigger(ajaxsend, [xml, s]); // wait for a response to come back var uploadcallback = function(istimeout){var io = document.getelementbyid(frameid); try { if(io.contentwindow) { xml.responsetext = io.contentwindow.document.body?io.contentwindow.document.body.innerhtml:null; xml.responsexml = io.contentwindow.document.xmldocument?io.contentwindow.document.xmldocument:io.contentwindow.document; }else if(io.contentdocument) { xml.responsetext = io.contentdocument.document.body?io.contentdocument.document.body.innerhtml:null; xml.responsexml = io.contentdocument.document.xmldocument?io.contentdocument.document.xmldocument:io.contentdocument.document; } }catch(e){ jquery.handleerror(s, xml, null, e);} if ( xml || istimeout == timeout) { requestdone = true;var status;try { status = istimeout != timeout ? success : error; // make sure that the request was successful or notmodified if ( status != error ){ // process the data (runs the xml through httpdata regardless of callback) var data = jquery.uploadhttpdata( xml, s.datatype ); // if a local callback was specified, fire it and pass it the data if ( s.success ) s.success( data, status ); // fire the global callback if( s.global ) jquery.event.trigger( ajaxsuccess, [xml, s] ); } else jquery.handleerror(s, xml, status);} catch(e) { status = error; jquery.handleerror(s, xml, status, e);}// the request was completed
if( s.global ) jquery.event.trigger( ajaxcomplete, [xml, s] );// handle the global ajax counter
if ( s.global && ! --jquery.active ) jquery.event.trigger( ajaxstop );// process result
if ( s.complete ) s.complete(xml, status);jquery(io).unbind()
settimeout(function()
{ try {jquery(io).remove();jquery(form).remove(); } catch(e)
{jquery.handleerror(s, xml, null, e); }}, 100)
xml = null
}
} // timeout checker if ( s.timeout > 0 ) { settimeout(function(){// check to see if the request is still happeningif( !requestdone ) uploadcallback( timeout ); }, s.timeout); } try {var form = jquery('#' + formid);
jquery(form).attr('action', s.url);jquery(form).attr('method', 'post');jquery(form).attr('target', frameid); if(form.encoding){ jquery(form).attr('encoding', 'multipart/form-data'); } else{ jquery(form).attr('enctype', 'multipart/form-data'); } jquery(form).submit(); } catch(e)
{ jquery.handleerror(s, xml, null, e); }jquery('#' + frameid).load(uploadcallback );
return {abort: function () {}}; },
uploadhttpdata: function( r, type ) {
var data = !type; data = type == xml || data ? r.responsexml : r.responsetext; // if the type is script, eval it in global context if ( type == script ) jquery.globaleval( data ); // get the javascript object, if json is used. if ( type == json ) eval( data = + data ); // evaluate scripts within html if ( type == html ) jquery().html(data).evalscripts(); return data;
}})
复制代码
过程：(1 )前端文件的代码： test.php
复制代码
相应的html为：
upload
复制代码
这样客户端就完成了。
(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)
复制代码
当然，真正的处理类于这样的：
'上传失败');}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文件：
复制代码
方法三，原生态ajax文件上传
html5 ajax 上传文件 图片
浏览... 上传
复制代码
php代码：
复制代码