文件异步上传

php页面：

$upload=new FileUpload('pic');//pic 上传的文件名$tmp=$upload->tmpFileName;if(empty($tmp)){    //没有文件上传执行的代码}else{  $name = $_FILES['pic']['name'];  $upload->path="./upload/push_image/$today/";//设置文件上传路径  $upload->newFileName=$picnum.$houzhui;//文件上传保存的名称  $up1=$upload->upload();//执行上传  if(!$up1){    //$upload->getError()  //获取上传失败的原因    //上传失败执行的操作  }else{    //上传成功执行的代码  }}

html页面

1. /首先引入js文件

   <script src="assets/js/ajaxfileupload.js"></script>

2. 触发上传事件

   $("#uploadpic").click(function () {var  picinfo = $("img");//上传成功后显示缩略图的标签元素var picurl = $("input[name='picurl']");//上传的图片//把图片属性归0  以免重新选择上传图片时缩放图片 造成的不规则大小picinfo.attr('width','');picinfo.attr('height','');picinfo.css('width','');picinfo.css('height','');picinfo.css('display','none');$.ajaxFileUpload({    url: '', //用于文件上传的服务器端执行脚本地址    secureuri: false, //是否需要安全协议，一般设置为false    fileElementId: 'image', //文件上传文本框的ID    dataType: 'json', //返回值类型 一般设置为json    success: function (data)  //服务器成功响应处理函数    {            //根据返回进行对应操作         if(data.status == 'error'){            //上传失败执行的代码         }else if(data.status == 'success'){            //上传成功执行的代码         }       },       //服务器响应失败处理函数       error: function (data, status, e)        {         alert('请重新上传');       }   })})

ajaxfileupload.js文件代码

jQuery.extend({    createUploadIframe: function(id, uri)    {        //create frame        var frameId = 'jUploadFrame' + id;        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';        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);                },    createUploadForm: function(id,fileElementId,data,fileElement)    {        //create form           var formId = 'jUploadForm' + id;        var fileId = 'jUploadFile' + id;        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');        if(data)        {            for(var i in data)            {                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);            }                   }        var oldElement;        if(fileElement == null)            oldElement = jQuery('#' + fileElementId);        else            oldElement = fileElement;        var newElement = jQuery(oldElement).clone();        jQuery(oldElement).attr('id', fileId);        jQuery(oldElement).before(newElement);        jQuery(oldElement).appendTo(form);        //set attributes        jQuery(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, (typeof(s.data)=='undefined'?false:s.data),s.fileElement);        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 happening                if( !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(){            try            {                jQuery('#' + frameId).remove();                jQuery(form).remove();            }            catch(e){}        }};    },    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("<div>").html(data).evalScripts();        return data;    },    handleError: function( s, xml, status, e ) {        // If a local callback was specified, fire it        if ( s.error )            s.error( xml, status, e );        // Fire the global callback        if ( s.global )            jQuery.event.trigger( "ajaxError", [xml, s, e] );    }});