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获取鼠标点击的位置实现思路及代码
May 09 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Vue中使用vux的配置详解
May 05 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
Element-UI+Vue模式使用总结
Jan 02 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
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
js实现时钟定时器
2020/03/26 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python 列表反转显示的四种方法
2020/11/16 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
个人简历的自荐信
2013/10/23 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
银行求职信模板
2015/03/20 职场文书
cf战队宣传语
2015/07/13 职场文书
2019年最新借条范本!
2019/07/08 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers