我正在开发一些非常简单的文件浏览器,用 php 对网站上的可下载文件进行分类。 意图是我可以通过填写所需的用户名创建一个新文件夹,浏览并上传该文件夹的缩略图。
在处理此问题时,我注意到选择现有图像比上传新图片和创建重复文件更有用。
这就是我所做的。我决定使用包含图像的单选按钮和 1 个包含浏览输入的单选按钮。
当浏览输入被选中时,它应该设置所需的属性,但是当从列表中选择一个现有图像时,它应该删除该属性。
经过一个晚上的挣扎,我想到了这个:http://jsfiddle.net/p8u75xje/2/
这似乎工作正常......只要你点击浏览输入旁边的单选按钮。当您单击现有图像,然后改变主意并单击浏览字段以最终取消并仍然提交表单时,它没有设置所需的属性并且不会阻止您上传“数字空气”
当我单击浏览输入时,我怎样才能设置所需的属性,而不仅仅是当单击单选按钮时,因为我会看到这些按钮隐藏在我的最终结果中。
<form>
<label>
<input type="radio" name="dlthumbs" value="upload" id="newimg"
onclick="document.getElementById('image').focus()" required checked="checked">
<input type="file" name="image" id="image"
onclick="document.getElementById('newimg').checked=true" required>
</label>
<label id='thumbexcists'>
<input type="radio" name="dlthumbs">
<img style='width: 50px; height: 50px' src='$catthumb'>
</label>
<label id='thumbexcists'>
<input type="radio" name="dlthumbs">
<img style='width: 50px; height: 50px' src='$catthumb'>
</label>
<script>
$('input[name="dlthumbs"]').change(function () {
if($("#newimg").is(':checked')) {
$('#image').prop('required', true);
} else {
$('#image').removeAttr('required');
}
});
</script>
<input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" />
</form>
最佳答案
有关采取的步骤,请参阅代码注释。
$(document).ready(function() {
$('input[name="dlthumbs"]').change(checkRequired);
// since you're defaulting to the "newimg" being checked,
// you probably want to run this on page load as well
checkRequired();
});
function checkRequired() {
if ($("#newimg").is(':checked')) {
$('#image').prop('required', true);
} else {
// #newimage is currently set to required in your markup. toggle that too.
$('#image, #newimg').removeAttr('required');
// could add #newimg to prop('required', true) above but it doesn't really need to be.
// The file input is what's required.
}
}
/* CSS to make it all obvious in the test. */
[required] {
padding: 10px;
background-color: red;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td>
<label>
<input type="radio" name="dlthumbs" value="upload" id="newimg" onclick="document.getElementById('image').focus()" required checked="checked">
<!--
Trigger a click on "newimage". This runs the checkRequired() code.
Also removed required from the element. JS will handle that.
You could also change the name of this input to dlthumbs.
-->
<input type="file" name="image" id="image" onclick="document.getElementById('newimg').click()">
</label>
</td>
</tr>
<tr>
<td>
<label id='thumbexcists'>
<input type="radio" name="dlthumbs">
<img style='width: 50px; height: 50px' src='$catthumb'>
</label>
<label id='thumbexcists'>
<input type="radio" name="dlthumbs">
<img style='width: 50px; height: 50px' src='$catthumb'>
</label>
</td>
</tr>
</table>
<script>
</script>
<input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" />
</form>
关于javascript - 单击浏览表单时添加所需的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41528558/