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调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
javascript判断office版本示例
Apr 11 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 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
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
深入浅出学习python装饰器
2017/09/29 Python
python使用selenium实现批量文件下载
2019/03/11 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
小结Python的反射机制
2020/09/28 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
大学毕业感言200字
2014/03/09 职场文书
保险公司晨会主持词
2014/03/22 职场文书
篮球比赛口号
2014/06/10 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL