• 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); 
            }
  • 相关阅读:
    部署ArcGIS JS API 离线包(Tomcat与IIS)
    BootStrap入门教程 (一)
    找个些有用的网站(CSS生成)
    android 调用系统相机拍照 获取原图
    Android 拍照
    Android调用Webservice发送文件
    Android 开发添加控件事件的三种方式
    vim中的ctrl+s导致的“假死”、无响应、不接受输入
    Ubuntu下eclipse中运行Hadoop时所需要的JRE与JDK的搭配
    ubuntu下安装bin文件
  • 原文地址:https://www.cnblogs.com/shuaihan/p/9443883.html
Copyright © 2020-2023  润新知