Question

我有一个要求，我需要使用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>

我有什么想法可以解决这个问题。我可以在代码中处理提交，但我不确定如何访问＆＃34;文件＆＃34; javascript代码中的数据。

Answer 1

我能够通过解决方法解决这个问题。

文件上传使用类名来解除文件提交。他们使用班级名称＆＃34; start＆＃34;用于提交的按钮。

我做了实际的＆＃34;开始＆＃34;按钮隐藏并创建了我自己的按钮，并在我的angularjs控制器中调用我自己的方法验证，如果所有验证都通过它，则调用实际的＆＃34;开始＆＃34;按钮。

  <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();
            }
        }

这样，提交如果仅在完成所有验证过程（或任何其他自定义内容）后被解雇。

至于为什么提交多次没有被调用，我认为文件上传代码解除了＆＃34; Start＆＃34;上的click事件的绑定。我们第一次在提交处理程序中返回false时按钮，因此不再处理任何点击。解决这个问题的另一种方法是调整代码以重新绑定＆＃34; start＆＃34;按钮单击处理程序，但这对我来说似乎比我工作的风险更大。

感谢。

Answer 2

您是否无法为保存按钮的点击事件调用formValid（）？喜欢

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

仅当条件为真时才使用Blueimp文件上载上载文件

2 个答案: