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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
js判断浏览器的比较全的代码
Feb 13 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
js浏览器html5表单验证
Oct 17 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python 消费 kafka 数据教程
2019/12/21 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
民生工程实施方案
2014/03/22 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python