仅当条件为真时才使用 Blueimp 文件上传上传文件答案

【问题标题】：Upload files using Blueimp file upload only if condition is true仅当条件为真时才使用 Blueimp 文件上传上传文件
【发布时间】：2015-01-17 07:52:12
【问题描述】：

我有一个要求，我需要使用 Blueimp 文件上传来上传多个文件。我的另一个要求是从一组必填字段（文本框）中提交一些数据。

例如，用户会选择几个要上传的文件并给出名称、类型、日期等，这些字段是必填的。我应该同时提交文件和表单数据。

为此，我在文件上传的提交回调中执行了表单字段的验证。

$('#fileupload).fileupload({
   singleFileUploads: false,
   autoUpload: false,
   acceptFileTypes: /(jpg)|(jpeg)|(png)|(gif)|(pdf)|(doc)|(docx)$/i, 
   submit:
          {
             if(formValid())
             {
                 return true;
              }
             else
             {
                  return false;
             }
          }
});

如果用户第一次没有输入必填字段并显示验证错误，这将非常有用。

问题是如果用户在我们取消提交并点击保存后更正表单，提交不会被触发，除非用户选择另一个文件并再次点击保存。

               <button type="button" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Save</span>
                </button>

任何想法我可以如何处理。我可以在代码中处理提交，但我不确定如何访问 javascript 代码中的“文件”数据。

【问题讨论】：

标签： jquery file-upload blueimp

【解决方案1】：

你不能为保存按钮的点击事件调用 formValid() 吗？喜欢

$("#save").on("click",function(){
    if(formValid()) {
        $('#fileupload).fileupload({
        //your all stuff
        })
    }
})

【讨论】：

感谢您的回复。我认为这不适用于我的情况。我自己找到了一个我认为对我有用的解决方案。

【解决方案2】：

我能够通过变通方法解决此问题。

文件上传使用类名来触发文件提交。他们使用类名“start”作为用于提交的按钮。

我隐藏了实际的“开始”按钮并创建了我自己的按钮，并在我的 angularjs 控制器中调用了我自己的方法，该方法进行验证，如果所有验证都通过它，则调用实际的“开始”按钮上的点击。

  <button type="button" class="btn btn-primary" ng-click="vm.SubmitForm()">
       <i class="icon-upload icon-white"></i>
       <span>Save</span>
  </button>

  <button type="button" id="saveButton" class="btn btn-primary start" style="display:none;">
       <i class="icon-upload icon-white"></i>
       <span>Save</span>
  </button>

在我自己的角度控制器方法中，我有（在打字稿中）

     private SubmitForm()
        {
            if (this.Validate())
            {
                $('#saveButton').click();
            }
        }

这样，只有在所有验证过程（或任何其他自定义内容）完成后才触发提交。

至于为什么没有多次调用提交，我认为文件上传代码在我们第一次在提交处理程序中返回 false 时取消绑定“开始”按钮上的点击事件，因此不再处理点击.解决此问题的另一种方法可能是调整代码以重新绑定“开始”按钮单击处理程序，但这对我来说似乎比我的工作风险更大。

谢谢。

【讨论】：