禁用提交按钮,直到选择上传文件

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>

JS Fiddle演示.

Answer 2

使用prop()稍微简单一些,我认为现在是首选方法:

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

在IE,Chrome和FireFox中测试过.

Answer 3

如果有人现在（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 4

尝试

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