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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
vue-router源码之history类的浅析
May 21 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
JavaScript中数组去重的5种方法
Jul 04 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
探讨如何把session存入数据库
2013/06/07 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
总结一些js自定义的函数
2006/08/05 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python九九乘法表的实例
2017/09/26 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python实现简单坦克大战
2020/03/27 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
企业内部培训方案
2014/02/04 职场文书
四风存在的原因分析
2014/02/11 职场文书
快餐公司创业计划书
2014/04/29 职场文书
团日活动总结书
2014/05/08 职场文书
会计人员演讲稿
2014/09/11 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python