ajax 上传文件 进度条

html 页面 

<input type="file"  id="formfiles"  name="server_path" multiple="multiple" onchange="onchg()" >

<div class="progress">
    <div></div>
</div>
<button onclick="xhr()" >上传</button>

css样式

.progress {
   width: 600px;
    height: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0px;
    overflow: hidden;
}
/* 初始状态设置进度条宽度为0px */
.progress > div {
    width: 0px;     
    height: 100%;
    background-color: yellowgreen;
    transition: all .3s ease;
}

功能实现

 

 

html

      <div class="form-group" style="margin-top: 15px; margin-bottom: 0px">

            <label for="input" class="col-xs-1 control-label">{:__lang('文件上传')}:</label>

 　　　　　　　　<div class="col-xs-6"> 

                <input class="form-control config-form-control" style="width:30%;margin-bottom: 10px;" placeholder="{:__lang('请选择要上传的文件')}" type="text" id="upval"  value="" name=""    placeholder=""> 

                  <input id="formfiles"  name="server_path" multiple="multiple" onchange="onchg()" style="width:65px;margin-top:15px; display:none; " type="file">

                    <div class="progress progress-striped active" style="height:10px;width:30%;margin-bottom: 10px;display:none;">

                          <div id="progressvens" style="width: 0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-danger">

                           <span id="progressspan" style="color:#ed5565;">0%</span>

                          </div>

                    </div>

                  <span type="button" id="loading-example-btn" style="color:#ed5565;display:none "><i class="fa fa-refresh"></i> {:__lang('上传中')}</span>

               </div>

    　　</div>

jquery

function xhr(){  
      
        var formData = new FormData();  
        formData.append('server_path', $('input[name=server_path]')[0].files[0]); 
        var filesize = $('input[name=server_path]')[0].files[0].size; 
        if(filesize > (500*1024*1024)){ 
        layer.alert('{:__lang("该文件超过上传上限(500M),请重新上传")}',{
                        title: '{:__lang("提示框")}',               
                        icon:0,     
                    })
            $("#msg_upload").html(' ');
            return false;
        } 
 
     $.ajax(     
      {
          url:"__URL__/fileupload?lang={:input('param.lang')}&centerdb={:input('param.centerdb')}",  
          type: "POST",
          data:formData,
          processData:false,  
          contentType:false,   
          dataType: 'json',
        //   cache: false,
          xhr:function(){
　　　　　　　　//XMLHttpRequest.upload 向后台上传文件时监听进度，主要使用的是XMLHttpRequest提供的upload方法，此方法会返回一个XMLHttpRequestUpload对象，用来表示上传进度 。
              var xhr = new XMLHttpRequest(); 
　　　　　　　　// 使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
              xhr.upload.addEventListener('progress',function(e){
　　　　　　　　　　//loaded代表上传了多少  total代表总数为多少
                var vnum = Math.floor((e.loaded / e.total) * 100);
                var progressRate = vnum + '%'; 
                $('#progressvens').css('width',progressRate);
                $('#progressvens').attr('aria-valuenow',vnum);
                $('#progressspan').text(progressRate);
              })
              return xhr; 
          }, 
    
          success:function(res){
            simpleLoad($("#loading-example-btn"), false);
            if(res.code == 200){
                layer.msg(res.msg, {icon: 6});
                $("#upvalxhr").hide();
            }else{
                layer.msg(res.msg, {icon: 5});
            }

          } 
      }
      );
 
    }
 

$.ajax 中的processData

在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的)

默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded

如果想发送不想转换的的信息的时候需要手动将其设置为false

在我遇到的是传输的是blob对象的时候就是不需要将传输的数据序列化,一般的还有类似DOM树等

$.ajax 中的processData

参考:https://segmentfault.com/a/1190000007207128?utm_source=tag-newest

$.ajax 其他参数自行百度