Question

我有几个输入

<div class="row">
    <div class="col-md-6 col-sm-offset-3 file-input">
        <div class="input-group">
            <input type="text" class="form-control" id="fileOneContainer" readonly>
        <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
                Browse&hellip; <input type="file" id="fileOne" name="fileOne" class="fileGroup">
            </span>
        </span>
        </div>
    </div>
    <div class="col-md-6 col-sm-offset-3 file-input">
        <div class="input-group">
            <input type="text" class="form-control" id="fileTwoContainer" readonly>
            <span class="input-group-btn">
                <span class="btn btn-primary btn-file">
                    Browse&hellip; <input type="file" id="fileTwo" name="fileTwo" class="fileGroup">
                </span>
            </span>
        </div>
    </div>
</div>

现在我必须在Javascript中为此进行自己的自定义验证。现在只关注第一个输入，规则是：

不能空着
不能大于2MB
必须是特定文件类型之一

为了处理这一切，我想出了以下内容

var fileOne = $("#fileOne").val();

if(fileOne.length == 0) {
    $(this).addClass('error');
    errors.push("- Please upload a document");
} else if($("#fileOne")[0].files[0].size > 2097152) {
    errors.push("- Please upload a file smaller than 2MB");
} else if(  $("#fileOne")[0].files[0].type != 'image/bmp' &&
    $("#fileOne")[0].files[0].type != 'image/jpeg' &&
    $("#fileOne")[0].files[0].type != 'image/pjpeg' &&
    $("#fileOne")[0].files[0].type != 'image/png' &&
    $("#fileOne")[0].files[0].type != 'image/tiff' &&
    $("#fileOne")[0].files[0].type != 'application/pdf') {
    errors.push("- Please upload one of the valid document types");
}

这似乎有效，虽然我想它可以改进。

无论如何，我现在需要处理第二个输入。最初，此输入应隐藏，并且仅在单击添加更多按钮时显示。现在我真的不想通过css隐藏它，因为这可以使用开发人员工具进行更改。

第二个输入的规则与上面几乎相同，但不需要此输入。如果第一个输入具有值，则此输入应该只有一个值。因此，除非您已经将文件上传到第一个输入，否则您无法将文件上传到第二个输入。

处理第二个输入以达到我想要的效果的最佳方法是什么？

任何建议表示赞赏。

由于

更新所以我现在有了这个

    var fileInputs = document.querySelectorAll('.fileGroup');

    for (var i = 0; i < fileInputs.length; i++) {
        fileInputs[i].addEventListener('change', function(event){
            error = validateFile(event);
            errors.push(error);
        });
    };

function validateFile(event) {
    var input = event.target;
    var fileLength = input.files[0].length;
    var fileSize = input.files[0].size;
    var fileType = input.files[0].type;

    if(fileLength == 0) {
        $(this).addClass('error');
        return("- Please upload a document");
    } else if(fileSize > 2097152) {
        return("- Please upload a file smaller than 2MB");
    } else if(  fileType != 'image/bmp' &&
                fileType != 'image/jpeg' &&
                fileType != 'image/pjpeg' &&
                fileType != 'image/png' &&
                fileType != 'image/tiff' &&
                fileType != 'application/pdf') {
        return("- Please upload one of the valid document types");
    }
}

问题是我需要在提交表单后显示错误，而不是在fileinput更改时显示。没有改变事件，有没有办法做到这一点？

由于

Answer 1

尝试将accept属性设置为".bmp,.jpeg,.jpg,.pjpeg,.png,.tiff,.pdf"，将disabled添加到第二个input，将disabled设置为false change第一个input

的事件处理程序

var errors = [];

$(document).on("change", "#fileOne, #fileTwo:not(:disabled)", function() {
  console.log(this.files);
  if (this.files[0].size > 2097152) {
    errors.push("- Please upload a file smaller than 2MB");
  };
  if (this.files.length) {
    $("#fileTwo").prop("disabled", false)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-offset-3 file-input">
    <div class="input-group">
      <input type="text" class="form-control" id="fileOneContainer" readonly>
      <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
                Browse&hellip; <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".bmp,.jpeg,.jpg,.pjpeg,.png,.tiff,.pdf">
            </span>
      </span>
    </div>
  </div>
  <div class="col-md-6 col-sm-offset-3 file-input">
    <div class="input-group">
      <input type="text" class="form-control" id="fileTwoContainer" readonly>
      <span class="input-group-btn">
                <span class="btn btn-primary btn-file">
                    Browse&hellip; <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".bmp,.jpeg,.jpg,.pjpeg,.png,.tiff,.pdf" disabled="true">
                </span>
      </span>
    </div>
  </div>
</div>

Answer 2

我建议循环输入并绑定更改事件侦听器以验证文件。这样你就不必重复逻辑，你可以通过事件获取上下文。

function validateFile(event) {
    var input = event.target;
    var fileSize = input.files[0].size;
    // rest of validation logic here.

}

var fileInputs = document.querySelectorAll('.fileGroup')

for (var i = 0; i < fileInputs.length; i++) {
    fileInputs[i].addEventListener('change', function(event){
        validateFile(event);
    });
};

上述入门代码应该让您朝着正确的方向前进。

编辑：如果你想在提交时这样做，你可以写一些这样的代码：

document.forms[index].onsubmit = function() {
    validateFile();
}

索引是页面上表单的索引。如果只有一个表格，则很可能是0。

这是一个小提琴： http://jsfiddle.net/dgautsch/cep7cggr/

JQuery文件输入验证和隐藏div

2 个答案: