zoukankan      html  css  js  c++  java
  • jquery获取上传进度和取消上传操作

    var xhrOnProgress=function(fun) {
                  xhrOnProgress.onprogress = fun; //绑定监听
                  //使用闭包实现监听绑
                  return function() {
                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                    var xhr = $.ajaxSettings.xhr();
                    //判断监听函数是否为函数
                    if (typeof xhrOnProgress.onprogress !== 'function')
                      return xhr;
                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                      xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
                  }
            }
            //文件上传 快速
            function newFileUpload(_this){
                var fd = new FormData();
                fd.append("paragram", 12345); //上传的参数名 参数值 k-v键值对
                fd.append("upfile", $("#upfile").get(0).files[0]);//上传的文件file
                ajaxRe =$.ajax({
                    url: "${ctx}/platform/system/sysFile/fileUpload.ht",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    data: fd,
                    success: function(data) {
                        $("#loading_upload").hide(20);  
                        var fileId=JSON.parse(data).fileId;
                        var fileName=JSON.parse(data).fileName;
                        $("#fileList_upload").html($("#fileList_upload").html()+'<div style="font-size:15px;height:28px;line-height:28px"><span fileid="'+fileId+'" name="attach" file="'+fileId+','+fileName+'" res="oa" filename="'+fileName+'">'+fileName+'</span>&nbsp;&nbsp;<img onclick="AttachMent.download(this);" style="15px;height:15px" src="/oa/styles/common/img/enclosure/download.png">&nbsp;&nbsp;<img onclick="AttachMent.view(this);" style="15px;height:15px" src="/oa/styles/common/img/enclosure/preview.png">&nbsp;&nbsp;<img onclick="mailDelFile('+fileId+',this);" style="15px;height:15px" src="/oa/styles/common/img/enclosure/delete.png"></div>')
                        var obj={};
                        obj.id=fileId
                        obj.name=fileName
                        uploadArr.push(obj);
                        $("#filelist").html(JSON.stringify(uploadArr));
                        $("#upfile").val("")
                    },
                    xhr:xhrOnProgress(function(e){
                        var percent=e.loaded / e.total * 100;//计算百分比
                        $("#progess").html(percent.toFixed(2));
                    }),
                    beforeSend: function(){  
                         $("#loading_upload").show(20);  
                    },
                })
                
            }
            function canceled_upload(){
                ajaxRe.abort()
                $("#upfile").val("")
                $("#loading_upload").hide(20); 
            }
  • 相关阅读:
    $(document).ready(function() {。。。。。})里面的所有的代码都不执行(不执行初始化脚本)
    checkbox使用示例
    js中数组元素的添加和删除
    maven构建项目里classpath的位置
    Docker相关释义
    linux的systemctl服务及其使用
    RabbitMQ中客户端的Channel类里各方法释义
    java四种内部类详解
    生成随机字符串(三种方式)
    RabbitMQ在java中基础使用
  • 原文地址:https://www.cnblogs.com/shuaihan/p/9443883.html
Copyright © 2011-2022 走看看