javascript实现uploadify上传格式以及个数限制


Posted in Javascript onNovember 23, 2015

本文为大家分享了javascript实现uploadify上传格式以及个数限制的关键代码,希望大家好好研究学习。

关键代码一:

function deleteUrl(){
   $("body").on("click",".img-wrap .mask span",function(event){
    event.stopPropagation();
          
    var qs=$('#file_upload-queue>div');//所有的队列
    var id=qs.eq(2).attr('id');//得到第三个队列的id
    $('#uploadTowedAccredit').uploadify('cancel',id);//这样就行了,会自动重置队列数量和删除dom对象,不能直接qs.eq(2).remove(),无效
      
    /*
    if(!window.confirm("您确定删除附件?")){
      return;
    }
    var imgUrl=$(this).parents(".img-wrap").find("img").attr("src");
    deleteImage(imgUrl);
    $(this).parents(".img-wrap").remove();
    */
  });
};

关键代码二:

<li class="blockli clearfix" style="padding-bottom: 5px;">
  <span class="left-name"><em class="red-star">*</em>拖机授权委托书:</span>
  <div class="upload-wrap" style="width:100px;">
    <input type="file" name="uploadTowedAccredit" id="uploadTowedAccredit" class="filetext"/>
  </div>
  <span id="uploadTowedAccreditLinkTip" class="warn-tips"><em></em>请上传附件,最多上传${towedAccreditPicMax} 张</span>
  <div id="towedAccreditDiv" class="up-img-list clearfix"></div>
</li>

关键代码三:

// 上传拖机授权委托书
function uploadTowedAccreditInit(){
   $("#uploadTowedAccredit").uploadify({
    'hideButton':'true',
    'preventCaching' : 'true',
    'checkExisting':'true',
    'swf': SWF, 
    'uploader':uploadImg,
    'debug':false,
    'multi': true,
    'method': 'post',
    'preventCaching' : true,
    'removeCompleted' : true,
    'removeTimeout' : 10,
    'requeueErrors' : true,
    'successTimeout' : 30,
    'uploadLimit' : ${towedAccreditPicMax},
     
    'fileObjName' : 'Filedata',
    //单张图片最大限制
    'fileSizeLimit' : '1024KB',
    'fileTypeDesc' : 'Image Files',
    //仅限上传jpg格式图片
    'fileTypeExts' : '*.jpg;*.png',
    'height': 24,
    'width':73,
    'buttonText' : '上传附件',
    'auto': true,
    'buttonClass':'uploada btn-fff-24',
   
    'onSWFReady' : function() {
    },
     
    'onInit':function(){
      // $("#file_upload-button").css("width","100");
     },
         
    //选择图片完成
    'onSelect' : function() {
 
    },
     
    //取消上传
    'onCancel' : function(file) {
    },
    'onCheck': function(event,data,key) {
    },
    //开始上传
    'onUploadStart' : function(file) {
      $('.uploadify-queue').html('');
    },
     
    //上传过程中
    'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
      $('.uploadify-queue').html('');
      $("#uploadTowedAccreditLinkTip").html('<em></em>上传中...');
    },
     
    //上传完成
    'onUploadComplete' : function(file) {
        $('.uploadify-queue').html('');
        $("#uploadTowedAccreditLinkTip").html('<em></em>上传成功,待提交');
    },
     
    //上传成功
    'onUploadSuccess' : function(file, data, response) {
      var obj = eval('(' + data + ')');
        var result=obj.result;
        if(result=="true"){
          var filename=obj.filename;
          $('.uploadify-queue').html('');
          $('#towedAccreditDiv').append("<div class='img-wrap'><img width='112' height='84' alt='' src='"+filename+"'><div class='mask'><em></em><span></span></div></div>");
        }
    },
     
    //上传失败 //附件格式不正确,请上传JPG、BMP、PNG格式文件,大小不超过3MB
    'onUploadError' : function(file, errorCode, errorMsg, errorString) {
      switch(errorCode) {
        case -100:
          alert("上传的文件数量已经超出系统限制的"+$('#uploadTowedAccredit').uploadify('settings','queueSizeLimit')+"个文件!");
          break;
        case -110:
          alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadTowedAccredit').uploadify('settings','fileSizeLimit')+"大小!");
          break;
        case -120:
          alert("文件 ["+file.name+"] 大小异常!");
          break;
        case -130:
          alert("文件 ["+file.name+"] 类型不正确!");
          break;
      }
    },
    //上传失败 //附件格式不正确,请上传JPG、BMP、PNG格式文件,大小不超过3MB
    'onSelectError' : function(file, errorCode, errorMsg) { 
      var msgText = "上传失败\n"; 
      switch (errorCode) { 
        case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: 
          var towedAccreditDivLen = $("#towedAccreditDiv").children().length;
          msgText += "每次最多上传 " + $('#uploadTowedAccredit').uploadify('settings','uploadLimit') + "个文件"; 
          break; 
        case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 
          msgText += "文件大小超过限制( " + $('#uploadTowedAccredit').uploadify('settings','fileSizeLimit') + " )"; 
          break; 
        case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 
          msgText += "文件大小为0"; 
          break; 
        case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: 
          msgText += "文件格式不正确,仅限 " + $('#uploadTowedAccredit').uploadify('settings','fileTypeExts'); 
          break; 
        default: 
          msgText += "错误代码:" + errorCode + "\n" + errorMsg; 
      }
      alert(msgText);
    }
  });
   
  //判断用户是否有安装flash
 var obj = $("#uploadTowedAccredit").children().eq(0);
 if(obj.attr('type')!= "application/x-shockwave-flash"){
    alert('系统检测到您的浏览器没有安装flash插件,为了你能够正常上传图片,建议你安装flash');
    return;
  }
   
  $("#uploadTowedAccredit").css("float","left");
};

javascript如何限制uploadify上传格式以及个数这个问题希望通过本文大家都应该有了一定的了解,希望可以真正帮助大家解决uploadify上传个数以及格式限制的问题。

Javascript 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
express.js中间件说明详解
Mar 19 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
Jquery 效果使用详解
Nov 23 #Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
jQuery实现简洁的导航菜单效果
Nov 23 #Javascript
Bootstrap每天必学之表格
Nov 23 #Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 #Javascript
js实现简单计算器
Nov 22 #Javascript
You might like
解析php中如何直接执行SHELL
2013/06/28 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python版本五子棋的实现代码
2018/12/11 Python
python制作填词游戏步骤详解
2019/05/05 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python与字符编码问题
2019/05/24 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python多线程正确用法实例解析
2020/05/30 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
综治宣传月活动总结
2014/04/28 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
文言文辞职信
2015/02/28 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python