[英]File upload click simulation button triggers form
我正在创建一个画廊,允许上传者一次上传一个图像/多个图像。 默认情况下,将显示一个文件输入以及用于相应图像描述的文本输入。
我还有另一个按钮,用于模拟出于美观目的而单击的文件输入。 单击此按钮后,将触发文件浏览器,但是似乎提交了文件输入所在的表单?
<button id="new-dialogue">add image</button>
<form action="action.php" method="post" enctype="multipart/form-data">
<div class="create-upload">
<!-- SECTION REPEATED WITH DIFFERENT IDS AS #NEW-DIALOGUE CLICKED -->
<div class="upload">
<input class="image-upload" type="file" id="input1" name="file[]"/>
<button class="btn-select" id="1">select file</button>
<input id="desc" type="text" name="desc[]"/>
</div>
<!-- SECTION -->
</div>
</form>
使用JavaScript
$('document').ready(function() {
var i = 1;
$('#new-dialogue').click(function() {
i++
if(i >= 6) {
} else {
$('.create-upload').append('<div class="upload"><input class="image-upload" type="file" id="input' + i + '" name="file[]"/><button class="btn-select" id="file' + i + '">select file</button><input id="desc" type="text" name="desc[]"/></div>');
$('.image-upload').imgPreview();
}
});
$('.btn-select').click(function () {
var id = this.id;
$('input#input' + id).click();
});
});
type='button'
以禁用按钮作为submit
类型。
<button class="btn-select" id="file1" type='button'>select file</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.