-2

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

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"到输入类型=文件。

4

1 回答 1

0

您可以为此目的使用以下代码。

<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() ，因为某些浏览器不支持它。

于 2013-10-02T06:23:03.923 回答