javascript - jquer.filer插件封装 图片数量参数值由外部参数传进来 插件初试一次 参数计算不更新如何解决
高洛峰
高洛峰 2017-04-11 10:46:41
[JavaScript讨论组]

这是我自己封装的插件

$.fn.uploadFiles=function (container,fileUrls,success,deleteFiles, option) {

    if(typeof option === 'undefined')
    {
        option = {};
    }

        option = {
            fileTypes:option.fileTypes || ['jpeg', 'png', 'jpg', 'gif'],

            maxCount: option.maxCount || 5,

            fileSize: option.fileSize || 10
        };

    if(fileUrls!="") {
        var imgArr = fileUrls.split(" ");
        var urlCount = imgArr.length;
        if(option.maxCount-urlCount>0){}
        $(container).empty();
        container.append('

    ') for (var i = 0; i < urlCount; i++) { container.find(".jFiler-items-list").append('
  • \

    \

    \

    \

    \

    \ \

    \

    \

    \

      \
    • \
    \

    \

    \

    \
  • ') } } container.find(".jFiler-item-trash-action").click(function () { var imgUrl=$(this).parents(".jFiler-item").find(".imgShow").attr("src") deleteFiles(imgUrl) urlCount-- }); var limit=function () { if(option.maxCount - urlCount>0){ return option.maxCount - urlCount } else return 0 } $(this).filer({ extensions: option.fileTypes, limit:limit(), fileMaxSize: option.fileSize, maxSize: option.fileSize * (option.maxCount - urlCount), // changeInput: '

    将文件拖放至此

    or

    浏览文件

    ', showThumbs: true, // theme: "dragdropbox", templates: { box: '
      ', item: '
    • \

      \

      \

      \

      \

      \

      \

      \ {{fi-name}}\ {{fi-size2}}\

      \

      \

      \

      \

      \

        \
      • \
      \

      \

      \

      \
    • ', itemAppend: '
    • \

      \

      \

      \

      \

      \

      \

      \ {{fi-name}}\ {{fi-size2}}\

      \

      \

      \

      \

      \

        \
      • \
      \

      \

      \

      \
    • ', progressBar: '

      ', itemAppendToEnd: false, canvasImage: true, removeConfirmation: true, _selectors: { list: '.jFiler-items-list', item: '.jFiler-item', progressBar: '.bar', remove: '.jFiler-item-trash-action' } }, uploadFile: { url:"/res/image/Upload?_ajaxcalltype=1", data: null, type: 'POST', enctype: 'multipart/form-data', synchron: true, beforeSend: function () { }, success: function (data) { data = JSON.parse(data); if (data.Success) { var imgUrl = data.Data.Url; success(imgUrl) } else { common.alert(data.Message); } } }, onFileCheck:function () { urlCount=$(".jFiler-item").length return true }, dragDrop: { dragEnter: null, dragLeave: null, drop: null, dragContainer: null }, addMore: false, allowDuplicates: true, onRemove: function(itemEl){ var imgUrl=$(itemEl).closest(".jFiler-item").find("img").attr("src"); deleteFiles(imgUrl) urlCount=$(".jFiler-item").length }, dialogs: { alert: function (text) { return alert(text); }, confirm: function (text, callback) { confirm(text) ? callback() : null; } }, captions: { removeConfirmation: "确定要移除文件么?", errors: { filesLimit: "现在文件数量已大于等于限制("+option.maxCount+"),不能继续上传,可进行删除操作", filesType: "文件格式出错,只支持"+option.fileTypes+"上传", filesSize: function () { if("{{fi-limit}}">0){ return "{{fi-name}} 文件太大! 请选取小于 {{fi-fileMaxSize}} MB的文件" } else { return "现在文件数量已大于限制("+option.maxCount+"),不能继续上传,可进行删除操作" } }, filesSizeAll: "您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件" } } }); }

      回调参数

       var option={
                  maxCount:2
              }
              var fileUrls = $("#Images").val().trim();
              $("#fileQueue").uploadFiles($("#imgContainer"),fileUrls,success(),deleteFiles(),option)
          
          });
      
      function deleteFiles() {
      return function (imgUrl) {
          var itemSelect =$(".imgShow[src='"+imgUrl+"']").closest(".jFiler-item")
          var fileUrls = $("#Images").val();
          fileUrls = fileUrls.replace(imgUrl, "").replace("  ", " ").trim();
          $("#Images").val(fileUrls);
          itemSelect.fadeOut();
          itemSelect.remove()
      }
      }
      
      function success() {
          return function (imgUrl) {
              $(".jFiler .jFiler-item-thumb").append("

      "); var images = $("#Images").val(); $("#Images").val(images + " " + imgUrl); } }

      html

                  
      
      
      
                  

      封装中最开始是已上传的图片的展示,把隐藏域中传进去的url取出来也就是fileUrls当做参数传进去用来生成已上传的图片的展示

      这样取的图片限定数量,可是现在这种情况下 删除已经上传的图片计算出的能上传的图片数量并不会变 因为插件初始一次 这样我限定两张删除一张可插件仍认为我有两张提示不能上传 如何解决

      高洛峰
      高洛峰

      拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

      全部回复(0)
      热门教程
      更多>
      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
      php中文网:公益在线php培训,帮助PHP学习者快速成长!
      关注服务号 技术交流群
      PHP中文网订阅号
      每天精选资源文章推送

      Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号