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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
python实现Decorator模式实例代码
2018/02/09 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python3 实现调用串口功能
2019/12/26 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
Java模拟试题
2014/11/10 面试题
乡镇办公室工作决心书
2014/03/11 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
产品推广策划方案
2014/05/10 职场文书
婚纱店策划方案
2014/05/22 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
委托书格式范文
2015/01/28 职场文书
学校证明范文
2015/06/24 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android