ajax+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部分，比较简单：

 

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