Question

我尝试在javascript中简化以下多个图片上传代码，这样当我点击＆＃34; add_photo＆＃34;按钮它将启动＆＃34;选择/浏览文件＆＃34;对话框。我需要一些帮助。谢谢。

html表格：

<form enctype="multipart/form-data" action="" method="POST">
    <div id="filediv"> 
        <input type="file" id="file" name="file[]" style="visibility:hidden"/>  
        <input type="button" id="add_image" class="upload" value="Add Image";/>             
    </div>

    <input type="submit" id="upload" class="upload" name="submit" value="Upload Images";"/> 
</form>

我认为需要修改的相关javascript代码功能： .............................

$('#add_image').click( function()   
{ 
    $(this).before(
        $("<div/>", {id: 'filediv'}).fadeIn('slow')
        .append($("<input/>", {name: 'file[]', type: 'file', id:'file'}))
    );
});

Answer 1

您可以在输入上调用.click()以编程方式打开文件输入对话框。在$('#add_image').click函数内，您需要执行以下操作（伪代码）：

let input = $('input');
input.click();

Answer 2

您可以使用click()方法模拟文件输入上的点击事件。

$("button").click(function(){
    $("input").click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />
<button>Select file</button>

如何启动＆＃34;选择文件＆＃34;单击javascript时的对话框

2 个答案: