文件上傳點擊模擬按鈕觸發表格

Question

我正在創建一個畫廊，允許上傳者一次上傳一個圖像/多個圖像。 默認情況下，將顯示一個文件輸入以及用於相應圖像描述的文本輸入。

我還有另一個按鈕，用於模擬出於美觀目的而單擊的文件輸入。 單擊此按鈕后，將觸發文件瀏覽器，但是似乎提交了文件輸入所在的表單？

<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();
});
});

Answer 1

type='button'以禁用按鈕作為submit類型。

<button class="btn-select" id="file1" type='button'>select file</button>