基于jquery与jquery.form.js的表单文件流提交和上传体验提升

首先是导入库

<script src="tools/jquery-1.10.0.js" type="text/javascript" charset="utf-8"></script>

<script src="tools/jq.form.js" type="text/javascript" charset="utf-8"></script>

css进度条设置

<style>

       form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

        .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
        .percent { position:absolute; display:inline-block; top:1px; left:48%; }
   
</style>

html设置

<form action="http://192.168.0.120:801/college/department/import" method="post" enctype="multipart/form-data" id="myform">
    <input type="file" name="myfile" class="file" id="excel"/><br>
    <!--<input id="submitBtn" type="submit" value="提交">-->
    <input type="button" name="btn" value="提交" ng-click="gongSiImport()"/>
</form>
<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>
<div id="status"></div>

//导入公司信息 xxxxxxxxxxxxxxxxxx400
$scope.gongSiImport=function(){
var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');
    $("#myform").ajaxSubmit({
                url: apiUrl+'/college/department/import', /*设置post提交到的页面*/
                type: "post", /*设置表单以post方法提交*/
                headers:{'client_id' : clientId,'access_token':$scope.token,'accountid':$scope.accountid},
                dataType: "json", /*设置返回值类型为文本*/
                beforeSubmit: function() {
                    //表单提交前做表单验证
                    var fileType = $(".file").val().substring($(".file").val().lastIndexOf(".") + 1);
if(fileType != "xls" &&　fileType != "xlsx" &&fileType != ''){
    alert("只能上传excel文件");
    return false;
}else if(fileType==''){
alert("上传文件不能为空");
return false;
}
var filesize = $("input[type='file']")[0].files[0].size/1024/1024;
                if(filesize > 1){
                    alert("文件大小超过限制，最多1M");
                    return false;
                }
                },
                beforeSend: function() {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {//上传的过程
                //position 已上传了多少
                //total 总大小
                //percentVal已上传的百分数
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
                //console.log(percentVal, position, total);
            },
                success: function (data) {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
                    console.log(data)
                },
                error: function (error) {
                    console.info(error);
                },
                complete: function(xhr) {//完成
                status.html('上传结束!');
            }


            });
}