禁用提交按钮，直到文件选择上传 [英] disable submit button until file selected for upload

问题描述

我有一个上传图片的表单。我想禁用提交按钮，直到用户选择一个图片上传。我想用jQuery来做。目前我有一个JavaScript，阻止用户通过提交禁用多次提交表单。

这是我现在得到的：

pre> < script type =text / javascript>
函数submitonce（theform）{
// if IE 4+ or NS 6+
if（document.all || document.getElementById）{
//通过每个元素在表单中搜索submit和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 =formenctype =multipart / form-datamethod =postaction =upload.phponSubmit =submitonce（this）>
< input type =filename =my_fieldvalue =/>
< input type =submit>
< / form>


解决方案

Ubuntu 10.10），目前我无法检查其他平台：

jQuery

  $（document）.ready（
 function（）{
 $（'input：file'）。change（
 function（）{
 if （$（this）.val（））{
 $（'input：submit'）。attr（'disabled'，false）; 
 //或者如别处指出的那样：
 // $（'input：submit'）。removeAttr（'disabled'）; 
} 
} 
）; 
}）; 
  

html

 < form action =＃method =post> 
< input type =filename =fileInputid =fileInput/> 
< input type =submitvalue =submitdisabled /> 
< / form> 
< div id =result>< / div> 
  

JS小提琴演示。

I have a form for uploading images. I'd like to disable submit button, until user selects an image to upload. I'd like to do it with jQuery. Currently I have a JavaScript that prevent user from submitting the form more than once by disabling it on submit. It'd be nice to combine this functionality with the new one.

Here's what I've got now:

<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>

解决方案

The following seems to work reliably in Chrome and Firefox (Ubuntu 10.10), I'm unable to check on other platforms at the moment:

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.

这篇关于禁用提交按钮，直到文件选择上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！