webuploader 设置上传数量

function onpost_Echo_ndkh2(serverURL,fileType,pickerID,listName,doneback,type){//上传路径,上传文件分类,选择框ID,文件列表ID,成功后向doneback的父级插入文件图标,文件类型
    
    var uploader = WebUploader.create({
        // swf文件路径
        swf: rootPath+'/js/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: serverURL+"?pinfoId="+jQuery('#signupId').val()+"&infoId="+jQuery("input[name='assessList[0].id']").val()+"&attId="+jQuery("input[name='assessList[0].attid']").val()+"&add="+jQuery('#add').val()+"&fileType="+fileType+"&time="+new Date().getTime()+jsessionParam,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: "#"+pickerID,
        //有文件就开始上传
        auto: true,
        method: 'post',
        //设置文件上传域的name
        fileVal:'filedata',
        fileNumLimit: 3,
        fileSingleSizeLimit: 3*1024*1024,
        //设置文件上传格式
        accept:{ extensions:type},
        
        //设置flash模式
        //runtimeOrder:'flash',
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize: false
    });
  //设置数量开始 var flag=true; var count = $(".scqt1class").length; uploader.on('beforeFileQueued',function (file) {debugger; count =$(".scqt1class").length; //实时获得上传限制的文件总数 var max = this.options.fileNumLimit; if ( count >= max && flag ) { flag = false; this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file ); setTimeout(function() { flag = true; }, 1 ); } return count >= max ? false : true; });
  uploader.on( 'fileDequeued', function() {
        count--;
    });
 
  
uploader.on( 'reset', function() {
        //   count = 0;
    });
 
  
//设置数量结束


// 当有文件被添加进队列的时候 uploader.on( 'fileQueued', function( file ) { count++; var $list = $("#"+listName); $list.append( '
<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>' ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if ( !$percent.length ) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%;height:5px;background:#ccc;">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' ); }); //成功之后调用 uploader.on( 'uploadSuccess', function( file ,response) { //上传成功后将文件图标显示到右侧列表 EchoImgNoscqt1(response,doneback); }); uploader.on( 'uploadError', function( file ,reason ) { $( '#'+file.id ).find('p.state').text('上传出错'); alert(file.name+"上传出错"); }); uploader.on( 'uploadComplete', function( file ) { //$( '#'+file.id ).find('.progress').fadeOut(); //上传完成后将文件名从列表删除 $( '#'+file.id ).fadeOut(); }); uploader.on("uploadFinished", function () { //每一次上传完成后清空文件队列,防止不能上传重复文件 uploader.reset(); }) uploader.on("error", function (error) { if (error == "F_EXCEED_SIZE") { alert("文件大小不能超过3M"); }else if( error == "Q_TYPE_DENIED" ){ alert("文件类型必须为"+type); }else if( error == "Q_EXCEED_NUM_LIMIT" ){ alert("文件数量不超过3篇"); } }); }

 

转载于:https://www.cnblogs.com/yang1018/p/11278311.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebUploader 是一个基于 HTML5 的文件上传组件,提供了丰富的上传功能和良好的用户体验。使用 WebUploader 实现批量上传文件可以通过以下步骤: 1. 引入 WebUploader 组件的 JS 和 CSS 文件。 2. 创建一个 HTML 元素作为文件上传区域。 3. 配置 WebUploader 组件,包括上传 URL、上传文件类型、上传文件大小等。 4. 监听文件添加和上传成功等事件,实现相应的业务逻辑。 下面是一个简单的示例代码: HTML: ```html <div id="uploader"> <div class="file-list"></div> <div class="btns"> <div id="picker">选择文件</div> <button id="start-upload-btn" type="button">开始上传</button> </div> </div> ``` JS: ```javascript var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false, // 文件接收服务。 server: 'upload.php', // 上传文件类型限制。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, // 单个文件上传大小限制。 fileSingleSizeLimit: 5 * 1024 * 1024, // 批量上传大小总限制。 fileSizeLimit: 100 * 1024 * 1024, // 上传并发数,默认为3。 threads: 3 }); // 当文件添加进队列时触发。 uploader.on('fileQueued', function(file) { $('.file-list').append('<div class="file-item">' + file.name + '</div>'); }); // 当文件上传成功时触发。 uploader.on('uploadSuccess', function(file, response) { console.log('文件上传成功:' + file.name); }); // 点击开始上传按钮时触发。 $('#start-upload-btn').on('click', function() { uploader.upload(); }); ``` 在上面的示例中,我们创建了一个文件上传区域,并配置了上传 URL、上传文件类型、上传文件大小等信息。当用户选择文件后,文件会被添加到上传队列中。当用户点击开始上传按钮时,所有文件将被批量上传到服务。在上传过程中,我们通过监听文件上传成功事件来实现相应的业务逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值