仅在条件为真时才使用Blueimp文件上传上传文件

hiure 发布于 2019-06-12 blueimp 最后更新 2019-06-12 21:16 2 浏览

我有一个要求,我需要使用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代码中的“文件”数据。
已邀请:

in_id

赞同来自:

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

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

aet

赞同来自:

我能够通过解决方法解决这个问题。 文件上载使用类名来解除文件提交。他们使用类名“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时取消绑定“开始”按钮上的click事件,因此不再处理任何点击。解决这个问题的另一种方法是调整代码以重新绑定“开始”按钮单击处理程序,但这对我来说似乎比我工作的风险更大。 谢谢。