Verwenden Sie Ajax+php, um Dateien hochzuladen

<p class="upload"> <p class="uploadBox">
    <span class="inputCover">选择文件</span>
	<form enctype="">
	    <input type="file" name="file" id="file" />
	    <button type="button" class="submit">上传</button>
	</form>
	<button type="button" class="upagain">继续上传</button>
	<span class="processBar"></span>
	<span class="processNum">未选择文件</span>
    </p>
</p>

*{
    font-family: 'microsoft yahei';
    color: #4A4A4A;
}
.upload{
    width: 700px;
    padding: 20px;
    border: 1px dashed #ccc;
    margin: 100px auto;
    border-radius: 5px;
}
.uploadBox{
    width: 100%;
    height: 35px;
    position: relative;
}
.uploadBox input{
    width: 200px;
    height: 30px;
    background: red;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 201;
    opacity: 0;
    cursor: pointer;
}
.uploadBox .inputCover{
    width: 200px;
    height: 30px;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 200;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border: 1px solid #009393;
    border-radius: 5px;
    cursor: pointer;
}
.uploadBox button.submit{
    width: 100px;
    height: 30px;
    position: absolute;
    left: 230px;
    top: 2px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #F0F0F0;
    outline: none;
    cursor: pointer;
}
.uploadBox button.submit:hover{
    background: #E0E0E0;
}
.uploadBox button.upagain{
    width: 100px;
    height: 30px;
    position: absolute;
    left: 340px;
    top: 2px;
    display: none;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #F0F0F0;
    outline: none;
    cursor: pointer;
}
.uploadBox button.upagain:hover{
    background: #E0E0E0;
}
.processBar{
    display: inline-block;
    width: 0;
    height: 7px;
    position: absolute;
    left: 500px;
    top: 14px;
    background: #009393;
}
.processNum{
    position: absolute;
    left: 620px;
    color: #009393;
    font-size: 12px;
    line-height: 35px;
}

$(document).ready(function(){
    var inputCover = $(".inputCover");
    var processNum = $(".processNum");
    var processBar = $(".processBar");
    //上传准备信息
    $("#file").change(function(){
        var file = document.getElementById('file');
        var fileName = file.files[0].name;
	var fileSize = file.files[0].size;
        processBar.css("width",0); 
        //验证要上传的文件
	if(fileSize > 1024*2*1024){
	    inputCover.html("<font>文件过大，请重新选择</font>");
	    processNum.html(&#39;未选择文件&#39;);
	    document.getElementById(&#39;file&#39;).value = &#39;&#39;;
	    return false;
	}else{
	    inputCover.html(fileName+&#39; / &#39;+parseInt(fileSize/1024)+&#39;K&#39;);
	    processNum.html(&#39;等待上传&#39;);
	}
    })

    //提交验证
    $(".submit").click(function(){
	if($("#file").val() == &#39;&#39;){
            alert(&#39;请先选择文件！&#39;);
	}else{
	    upload();
	}
    })

    //创建ajax对象，发送上传请求
    function upload(){
        var file = document.getElementById(&#39;file&#39;).files[0];
	var form = new FormData();
	form.append(&#39;myfile&#39;,file);
	$.ajax({
	    url: &#39;upload.php&#39;,//上传地址
	    async: true,//异步
	    type: &#39;post&#39;,//post方式
	    data: form,//FormData数据
	    processData: false,//不处理数据流 !important
 	    contentType: false,//不设置http头 !important
 	    xhr:function(){//获取上传进度            
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener(&#39;progress&#39;,function(e){//监听progress事件
                    var loaded = e.loaded;//已上传
                        var total = e.total;//总大小
                        var percent = Math.floor(100*loaded/total);//百分比
                        processNum.text(percent+"%");//数显进度
                        processBar.css("width",percent+"px");//图显进度}, false);
                }
                return myXhr;
            },
 	    success: function(data){//上传成功回调
 		console.log("文档当前位置是："+data);//获取文件链接
 		document.cookie = "url="+data;//此行可忽略
 		$(".submit").text(&#39;上传成功&#39;);
 		$(".upagain").css("display","block");
             }
	})
    }

    //继续上传
    $(".upagain").click(function(){
	$("#file").click();
	processNum.html(&#39;未选择文件&#39;);
        processBar.css("width",0); 
        $(".submit").text(&#39;上传&#39;);
	document.getElementById(&#39;file&#39;).value = &#39;&#39;;
	$(this).css("display","none");
    })
})

<?php  
if(isset($_FILES["myfile"])){  
    move_uploaded_file($_FILES["myfile"]["tmp_name"],"ajax/".$_FILES["myfile"]["name"]);
    echo "http://www.xuxiangbo.com/ajax/".$_FILES["myfile"]["name"];
}else{
    echo &#39;no file&#39;;
}
?>