点击图片时打开文件上传对话框。

Question

如果我点击按钮标签，我希望能够打开图像上传文件对话框。这是否可能？如果是，我该如何在 PHP 中实现它？

while{
    echo "<td><button><img src='".$cfet['productimage']."' width='50' height='40'></button></td>";
}

- user3386779

---

PHP 运行在服务器上，无法在客户端弹出任何东西。 - Marc B

@MarcB - 但问题中有JavaScript标签...... JavaScript可以编程地打开文件模态框，演示：http://jsfiddle.net/DerekL/3wRpA/ - Derek 朕會功夫

Answer 1

在你的HTML页面上包含一个输入类型为“file”的元素，在按钮的点击事件中使用jQuery的trigger函数触发文件输入类型元素的点击事件。

代码将如下所示：

<input type="file" id="imgupload" style="display:none"/> 
<button id="OpenImgUpload">Image Upload</button>

在按钮的点击事件中编写 jQuery 代码，如下：

$('#OpenImgUpload').click(function(){ $('#imgupload').trigger('click'); });

这会在您的按钮单击事件上打开文件上传对话框。

- Abhay Prince

---

如何在Angular 2+中调用触发器 - user2522354

Answer 2

<input type="file" id="imgupload" style="display:none"/>
<label for='imgupload'> <button id="OpenImgUpload">Image Upload</button></label>

点击for=属性会自动聚焦于“文件输入”并打开上传对话框。

- rajratna maitry

---

在我的React应用程序中有效。 - Dan Zuzevich

漂亮的干净解决方案，无需JS。 - DeZeA

哇哦...这么简单，我以为会更复杂。 - Divyang Desai

Answer 3

你需要加入一点小技巧来实现这个。

你可以将文件上传(input type=file)隐藏在你的 button 后面。

并且在你的按钮上点击时，你可以触发你的文件上传点击。

这样会在按钮点击时打开一个文件上传窗口。

<button id="btnfile"> 
 <img src='".$cfet['productimage']."' width='50' height='40'>
</button> 
<div class="wrapper"> //set wrapper `display:hidden`
     <input type="file" id="uploadfile" /> 
</div>

以及一些 JavaScript

$("#btnfile").click(function () {
    $("#uploadfile").click();
});

这个例子的 JSFiddle 链接为：http://jsfiddle.net/ravi441988/QmyHV/1/embedded/result/

- Ravikumar Sharma

Answer 4

此外，您可以直接在HTML代码中编写所有的内联内容。

<input type="file" id="imgupload">
<a href="#" onclick="$('#imgupload').trigger('click'); return false;">Upload file</a>

返回 false; - 可以用来拒绝在链接被点击后执行锚点动作。

- ufrutov

Answer 5

<input type="file" name="pic1" id="pic1" style="display:none;"/>
<label for="pic1">
    <img src="dist/img/picfilename.png">
</label>

以上代码已经过测试并且运行良好。

- Orhan Cengiz K.

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Smit Gajera

在现代浏览器上，如果您愿意，可以将input移动到label内部，并且不需要使用for/id属性进行关联 - 这样做非常有效。 - Ragen Dazs

Answer 6

  <label for="profileImage"> 
  <a style="cursor: pointer;"><em class="fa fa-upload"></em> Change Profile 
  Image</a></label> 
  <input type="file" name="profileImage" id="profileImage" style="display: none;">

- Sajeel Anwar

---

这可以在不使用jQuery的情况下实现。 - Sajeel Anwar

感谢您提供这段代码片段，它可能会立即提供一些帮助。通过展示为什么这是一个好的解决方案，适当的解释将极大地提高其教育价值，并使其对未来具有类似但不完全相同问题的读者更有用。请编辑您的答案以添加解释，并指出适用的限制和假设。 - Toby Speight

Answer 7

您可以通过onclick函数显示文件选择对话框，如果选择了一个文件（onchange事件），则发送表单以上传文件。

 <form id='foto' method='post' action='upload' method="POST"  enctype="multipart/form-data" >
  <div style="height:0px;overflow:hidden"> 
  <input type="file" id="fileInput" name="fileInput" onchange="this.form.submit()"/> 
  </div>

  <i class='fa fa-camera' onclick="fileInput.click();"></i>
</form> 

- ALEXANDER LOZANO

Answer 8

<button id="OpenImgUpload" onclick="$('#imgupload').trigger('click');">Image Upload</button>
<input type="file" id="imgupload" style="display:none"/> 

- عبدالرحمن شافعى

Answer 9

<!-- File input (hidden) -->
<input type="file" id="file1" style="display:none"/>    

<!-- Trigger button -->
<a href="javascript:void(0)" onClick="openSelect('#file1')">

<script type="text/javascript">                            
function openSelect(file)
{
  $(file).trigger('click');
}
</script>

- AGradePHP

---

这个问题已经有多个答案和一个被接受的答案了。您能否通过编辑您的答案来解释您的答案与其他答案的区别？同时请注意，仅有代码的答案从长远来看是没有用处的。 - 7uc1f3r

Answer 10

 <!--Hide input field to open it using button-->
        <input type="file" #file11 style="display:none">
        
        and <button type="file" (click)="file11.click()">Open file dialog</button>

- Zia Khan