禁用提交按钮，直到选择要上传的文件

Question

我有一个用于上传图片的表单。我想禁用提交按钮，直到用户选择要上传的图像。我想用 jQuery 来做。目前我有一个 JavaScript 函数，通过在提交时禁用它来防止用户多次提交表单。最好将此功能与新功能结合起来。

这是我现在得到的：

<script type="text/javascript">
function submitonce(theform) {
    //if IE 4+ or NS 6+
    if (document.all || document.getElementById) {
        //screen thru every element in the form, and hunt down "submit" and "reset"
        for (i = 0; i < theform.length; i++) {
            var tempobj = theform.elements[i]
            if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
            //disable em
            tempobj.disabled = true
        }
    }
}
</script>
<form name="form" enctype="multipart/form-data" method="post" action="upload.php" onSubmit="submitonce(this)">
 <input type="file" name="my_field" value="" />
 <input type="submit">
</form>

Answer 1

以下似乎在 Chrome 和 Firefox (Ubuntu 10.10) 中运行可靠，我目前无法在其他平台上检查：

jQuery

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);
                    // or, as has been pointed out elsewhere:
                    // $('input:submit').removeAttr('disabled'); 
                } 
            }
            );
    });

html

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

Demo at JS Fiddle.

Answer 2

使用 prop() 的稍微简单的方法，我认为这是现在的首选方法：

$('input:file').on("change", function() {
    $('input:submit').prop('disabled', !$(this).val()); 
});

在 IE、Chrome 和 FireFox 中测试。

Answer 3

试试

   $('#my_uploader').change(function() {
      if($(this).val()) {
        $('#my_submit_button').attr('disabled', '');
      } else {
        $('#my_submit_button').attr('disabled', 'disabled');
      }
    });

Answer 4

如果现在（2021 年）有人在看这个，这是我能够想出的非 jquery 解决方案！！其中一些不适用于较旧的浏览器，因此您的里程可能会有所不同 - 但如果您正在寻找一个现代简单的解决方案 - 这应该很好。

<div>
  <form method="post" action="someAction" enctype="multipart/form-data">
    <input type="file" name="fileUploaded" />
    <input type="submit" disabled="true" />
  </form>
  <script>
    document.querySelector("input[type=file]").onchange = ({
      target: { value },
    }) => {
      document.querySelector("input[type=submit]").disabled = !value;
    };
  </script>
</div>

关于此解决方案的一些注意事项：onChange 采用一个函数，该函数返回一个对象event，其中包含target 和value。 value为上传文件名字符串，用户取消选择时返回空字符串。

---

如果您正在寻找一种适用于多个文件输入和提交的解决方案，您可以使用类名来获取正确的。

<!-- index.html -->
<div>
  <form
    method="post"
    action="someAction"
    enctype="multipart/form-data"
  >
    <input class="fileUpload1" type="file" name="fileUploaded" />
    <input class="fileUpload1" type="submit" disabled="true" />
  </form>
</div>
<div>
  <form
    method="post"
    action="someOtherAction"
    enctype="multipart/form-data"
  >
    <input class="fileUpload2" type="file" name="fileUploaded2" />
    <input class="fileUpload2" type="submit" disabled="true" />
  </form>
</div>

// script.js
document.querySelectorAll("input[type=file]").forEach(
  (fileInput) =>
    (fileInput.onchange = ({ target: { value } }) => {
      document.querySelector(
        `input[type=submit].${fileInput.className}`
      ).disabled = !value;
    })
  );

Answer 5

如果你喜欢三元表达式：

$(document).ready(function(){
    var $submit = $('#submit_document');
    var $file = $('#file_path');

    $file.change(
        function(){
            $submit.attr('disabled',($(this).val() ? false : true));
        }
    );
});  

Answer 6

如果用户在没有先选择文件的情况下按下它，提供指令是否可能更有帮助，而不是禁用提交？那么添加这样的东西作为提交的onclick代码？

var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;

请注意，您的文件控件需要一个 ID 和一个名称

Answer 7

不使用脚本，只需在输入字段中使用 required