javascript 使用javascript验证输入类型=“文件”字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18438129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validate input type="file" field using javascript
提问by mkb
I have a form in which the user first select if they want to upload any file. If yes then 3 upload box are displayed to them.
我有一个表单，用户首先选择是否要上传任何文件。如果是，则向他们显示 3 个上传框。
On click of submit there is a JavaScript function which checks for any empty fields. In this function, if the option to upload file is selected, then I am checking if the input type="file" is empty.
单击提交时，有一个 JavaScript 函数可以检查任何空字段。在这个函数中，如果选择了上传文件的选项，那么我正在检查输入类型=“文件”是否为空。
The error I am facing is that even after the user select a file for upload, the error message to upload a file is still displayed.
我面临的错误是，即使在用户选择要上传的文件后，仍会显示上传文件的错误消息。
Here is my HTML code:
这是我的 HTML 代码：
<!-- 3rd Fieldset STARTS -->
<fieldset class="fieldSetSpace">
<legend class="legendText"> Upload Documents </legend>
<span id="yes"><input type="radio" name="rdoUploadDocu" id="rdoUploadDocuYes" tabindex="23" value="yes" onClick="javascript: showUploadDiv();" /></span>
Yes I have A Documents To Upload
<div id="divUploadDoc" style="display:none;">
<span class="contact_table">Upload Document 1 </span>
<input type="file" name="files[]" id="file1" class="txtCoName" />
<span class="contact_table">Upload Document 2</span>
<input type="file" name="files[]" id="file2" class="txtCoName" />
<span class="contact_table">Upload Document 3</span>
<input type="file" name="files[]" id="file3" class="txtCoName" />
</div>
<?php echo $errorResumeUpload; ?>
<br />
<span id="no"><input type="radio" name="rdoUploadDocu" id="rdoUploadDocuNo" value="no" tabindex="24" onClick="javascript: hideUploadDiv();" /></span>
No I do not have A Documents To Upload
<div id="divUploadCheckError" class="divError"></div>
</fieldset>
<!-- 3rd Fieldset ENDS -->
Here is my JS function:
这是我的 JS 函数：
else if (document.getElementById('rdoUploadDocuYes').checked)
{
var upload1 = document.getElementById('file1').value;
var upload2 = document.getElementById('file2').value;
var upload3 = document.getElementById('file3').value;
alert( upload1 );
alert( upload2 );
alert( upload3 );
if( ( upload1 == '' ) || ( upload2 == '' ) || ( upload3 == '' ) )
{
var objErrDiv = document.getElementById('divUploadCheckError');
objErrDiv.innerHTML= 'Please upload at least one documents ';
objErrDiv.style.padding='4px 4px';
objErrDiv.style.visibility='visible';
objErrDiv.style.margin='10px 0px 2px 0px';
return false;
}
else
{
return false;
}
}
Any help will be appreciated.
任何帮助将不胜感激。
回答by Praveen
I think you're missing to reset the innerHTMLof objErrDivdiv.
我认为你缺少重置innerHTML的objErrDivDIV。
else if (document.getElementById('rdoUploadDocuYes').checked)
{
var upload1 = document.getElementById('file1').value;
var upload2 = document.getElementById('file2').value;
var upload3 = document.getElementById('file3').value;
var objErrDiv = document.getElementById('divUploadCheckError');
alert( upload1 );
alert( upload2 );
alert( upload3 );
if( upload1 == '' )
{
objErrDiv.innerHTML= 'Please upload at least one documents ';
objErrDiv.style.padding='4px 4px';
objErrDiv.style.visibility='visible';
objErrDiv.style.margin='10px 0px 2px 0px';
return false;
}
else
{
objErrDiv.innerHTML=""; // Try adding this
return false;
}
}
