利用ajax+php实现文件上传

零到壹度

发布时间：2018-04-12 09:14:09

10115人浏览过

来源于php中文网

原创

理论上来说此类的文件/图片上传插件已经很多了，但是在使用的过程中还是会遇到各种各样的问题，，兼容问题、后台问题~~等等，所以既然别人的轮子我用不好，那就自己动手造一个吧。

本文中使用jq.ajax和php实现上传功能，前端代码一般无差，有的小伙伴后台不是php的，请参考贵语言的文档进行操作即可。

先看一下效果图，整个上传界面大概是这样的：查看demo

整体思路：

1、创建input设置type=file，id=file，样式设置opacity:0，position:absolute

2、创建一个遮罩层，并设置position:absolute并且z-index大于file

3、创建FormData对象，把file放到FormData中做为数据

4、创建ajax，发送FormData数据到upload.php，监听ajax的progress事件，实时返回上传进度

5、在html页面输出服务器的响应

6、上传完成之后，点击“继续上传”按钮，打开文件选择框，可继续上传。

HTML部分，比较简单：

选择文件

未选择文件

CSS，样式可以根据个人喜好自由调整，这里仅供参考：

*{
    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;
}

JS部分，jq.ajax：

$(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("文件过大，请重新选择");
	    processNum.html('未选择文件');
	    document.getElementById('file').value = '';
	    return false;
	}else{
	    inputCover.html(fileName+' / '+parseInt(fileSize/1024)+'K');
	    processNum.html('等待上传');
	}
    })

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

    //创建ajax对象，发送上传请求
    function upload(){
        var file = document.getElementById('file').files[0];
	var form = new FormData();
	form.append('myfile',file);
	$.ajax({
	    url: 'upload.php',//上传地址
	    async: true,//异步
	    type: 'post',//post方式
	    data: form,//FormData数据
	    processData: false,//不处理数据流 !important
 	    contentType: false,//不设置http头 !important
 	    xhr:function(){//获取上传进度            
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',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('上传成功');
 		$(".upagain").css("display","block");
             }
	})
    }

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

上传完毕，upload.php处理文件（为了服务器安全，仅贴出代码片段）：

转自博客

作者：Imin

链接：http://blog.xuxiangbo.com/im-22.html

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！