jquery获取上传进度和取消上传操作

摘要:
VarxhrOnProgress=function(func){xhrOnprogres.onprogress=func;//绑定侦听//使用闭包实现侦听并绑定returnfunction(){//通过$.ajaxSettings.xhr()获取XMLHttpRequest对象varxhr=$.ajaxSettings.xhr
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);"   src="http://t.zoukankan.com/oa/styles/common/img/enclosure/download.png">&nbsp;&nbsp;<img onclick="AttachMent.view(this);"   src="http://t.zoukankan.com/oa/styles/common/img/enclosure/preview.png">&nbsp;&nbsp;<img onclick="mailDelFile('+fileId+',this);"   src="http://t.zoukankan.com/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); 
        }

免责声明:文章转载自《jquery获取上传进度和取消上传操作》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android-SDCardUtil-工具类Logical Databases逻辑数据库下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JQuery的AJAX

定义和用法 ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。 最简单的情况下,$.ajax() 可以不...

省市区三级联动jquery插件 city-picker与百度地图API联动小案例

city-picker  插件是开源中国一个很好用的三级联动菜单 单独使用city-picker : <body> <div id="r-result"> 请输入:<input type="text" size="20" /> </body> <script type="...

jQuery源码学习之一 (采用匿名函数自执行模式)

1、如何在jquery官网找到 bug的相关说明?       打开网址  http://bugs.jquery.com/  后,再搜索框中输入bug的 编号(在jquery源码的注释中找到,例如:“ #13335 ”),可找到相关的详细说明和评论。 2、jquery应用 匿名函数自执行模式(避免全局变量污染) (function( window,...

使用jquery获取url以及jquery获取url参数的方法

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1、jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2、jquery获取url参数比较复杂,要用到正则表达式,所以学好javascrip...

JQuery 选择器处理特殊字符

在使用JS 选择器的时候,如果含有特殊字符,则选择器选择不了,比如:元素的Id为:QW~~,$("#QW~~"),这样是选择不了的,所以就要对特殊字符进行转义。JS转义函数如下: function escapeJquery(srcString) {// 转义之后的结果var escapseResult = srcString;// javascript正则...

JQuery 限制文本输入只能输入数字(可自定义正则表达式)

var JVerify ={ role: { number: /[0-9/]/, decimal: /[0-9./]/, code: /[0-9A-Z]/}, Verify: function() { for (var prop inJVerify.role) { $("[role^='" +...