Question

以下是用于测试目的的表单：

http://screencast.com/t/sp6WiM0H

我想采取的下一步是删除文件上传的默认浏览/提交按钮，并通过按钮完成所有操作（上面链接中的蓝色“添加图片”按钮）。

用户点击“添加照片”。
用户可以浏览照片。
当用户选择照片时，自动“提交”。

你会怎么做？

我认为JS可能是必需的，所以我标记了它。

谢谢

编辑：

表格如下：

<form action="upload_image.php" method="post" enctype="multipart/form-data">
    <div class="edit">
       <a href="" class="add blue_bg" onclick="performClick(document.getElementById('theFile'));">Add <br/> Pictures</a>
   </div>
   <input style="display:none;" type="file" id="theFile" name="photo" />
   <input type="hidden" name="owner_id" value="<?php echo $profileData[0]['id'] ?>">
</form>

它可以浏览，但似乎没有提交表单。

JS看起来像：

function performClick(node) {
   var evt = document.createEvent("MouseEvents");
   evt.initEvent("click", true, false);
   node.dispatchEvent(evt);
}

编辑：现在搞定了，我添加了这个JS来处理表单提交：

$("input[type='file']").on("change", function(){
    $("#photoForm").submit();
});

还将name="photo"添加到input type = file。

Answer 1

您可以使用以下代码。

<script type="text/javascript">
function performClick(node) {
   var evt = document.createEvent("MouseEvents");
   evt.initEvent("click", true, false);
   node.dispatchEvent(evt);
}
</script>
<a href="#" onclick="performClick(document.getElementById('theFile'));">Open file dialog</a>
<input type="file" id="theFile" />

请注意，您不能只使用.click（），因为某些浏览器不支持它。

将文件上载（浏览和提交）替换为一个按钮

1 个答案: