徐向博 / Imin.

ajax+php文件上传带进度条
作者:Imin 时间:2018-03-21 分类: 前端

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

本文中使用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部分,比较简单:

<div class="upload"> <div 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>
    </div>
</div>


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("<font>文件过大,请重新选择</font>");
	    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 处理文件(为了服务器安全,仅贴出代码片段):

<?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 'no file';
}
?> 


strbing: 博主可以提供一下源码下载吗? 2018-05-02 09:07