javascript - 文件上传点击模拟按钮触发表单

标签 javascript jquery

我正在创建一个图库,允许上传者一次上传一张/多张图片。默认情况下,一个文件输入与相应图像描述的文本输入一起显示。

我还有另一个按钮,它模拟文件输入被点击以达到美观目的。单击此按钮后,文件浏览器会触发,但放置文件输入的表单似乎已提交?

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

关于javascript - 文件上传点击模拟按钮触发表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18581649/

相关文章:

javascript - jQuery 单选数组选择器

javascript - 从流音频函数更新 useState 时无限重新渲染

javascript - Fizzbuzz 代码不工作

新标签页中的 javascript window.location

javascript - 使用JS获取名字首字母

javascript - jQuery 日期/时间选择器未通过 .serialize() 序列化)

javascript - 文档与文档的区别

javascript - 创建 iframe 嵌入并使用模态

javascript - JQuery - 动态隐藏按钮的第一个实例

jquery - 哪种 jQuery TreeView 最适合需求?