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

以下是用于测试的表单的外观：

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

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

我想可能需要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>

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添加到输入type=file中。

为此，您可以使用以下代码

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

请注意，您不能仅使用。单击，因为某些浏览器不支持它