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

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><p>return jQuery('#' + frameId).get(0);</p></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><p>    ajaxFileUpload: function(s) {</p></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><p>// The request was completed</p></li>
<li>if( s.global )</li>
<li>    jQuery.event.trigger( "ajaxComplete", [xml, s] );</li>
<li><p>// Handle the global AJAX counter</p></li>
<li>if ( s.global && ! --jQuery.active )</li>
<li>    jQuery.event.trigger( "ajaxStop" );</li>
<li><p>// Process result</p></li>
<li>if ( s.complete )</li>
<li>    s.complete(xml, status);</li>
<li><p>jQuery(io).unbind()</p></li>
<li><p>setTimeout(function()</p></li>
<li>{ try </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>        // 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><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></li>
<li><p>    uploadHttpData: function( r, type ) {</p></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><p>        return data;</p></li>
<li>    }</li>
<li>})</li>
<li>
</div>
<em onclick="copycode($('code_lld'));">复制代码</em>
</li>

复制代码

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