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 相关文章推荐
jQuery表格插件datatables用法总结
Sep 05 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
javascript数据类型验证方法
Dec 31 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
js实现简单模态框实例
Nov 16 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
JavaScript文档对象模型DOM
Nov 20 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简单获取复选框值的方法
2016/05/11 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
python字符串排序方法
2014/08/29 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python threading的使用方法解析
2019/08/28 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
酒会邀请函
2015/01/31 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
详解Python中的for循环
2022/04/30 Python