javascript - 如何在单击图像按钮时上传新文件

Question

我的任务是通过单击图像按钮上传新文件。我的代码是

    <label>File</lable>
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>

单击此按钮后，我想上传一个新文件。我该怎么做？您可以从Demo检查我的代码

Answer 1

您可以添加一个隐藏的文件输入字段，例如：

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />

并做：

$("input[type='image']").click(function() {
    $("input[id='my_file']").click();
});

演示::更新小提琴

Answer 2

不需要 javascript，只需将<input>和 放在<img>里面<label>，确保你隐藏<input>如下：

   <label for="image">
      <input type="file" name="image" id="image" style="display:none;"/>
      <img src="IMAGE URL"/>
   </label>

Answer 3

不需要javascript。

Just place both <input type="file"> and <img src=""> inside a label.

Eg:
<label>
    <input type="file" style="display:none">
<img src=""> 
</label>

这会很好用

演示：https ://codepen.io/sandeeprana1001/pen/dyPVvJZ

Answer 4

您使用了错误的输入，请改用文件，如果您希望按钮看起来像代码演示中的圆圈，您将需要使用 CSS 来更改“提交”的外观。这必须是以下形式：

<form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile"/>
  <input type="submit" class="circle-btn"/>
<form>

我不知道您在服务器端使用什么语言（PHP、ASP.NET 等），但您需要创建一个页面（例如，用于 php 的“upload_file.php”）。您可以在 google 中轻松找到有关如何创建这样的页面的示例，只需复制粘贴代码：

PHP 中的一个示例：http: //www.w3schools.com/php/php_file_upload.asp

希望能帮助到你 ：）

Answer 5

如果您正在寻找一个跨浏览器兼容的解决方案，您应该查看 plupload( http://www.plupload.com ) 它支持图像按钮以及我记得的。

Answer 6

您可以使用 css 执行此操作。

请检查此博客中的第四个答案。

如何自定义浏览按钮？

您可以将图像用作.button类的背景图像。

Answer 7

您也可以使用它来访问您上传的文件，因为在 PHP 中您无法访问标签内的文件。

<input type="file" name="input" id="input" style="display:none;">
<label for="input">
    <img src="images/default.jpg" id="image">
</label>

Answer 8

DemoUser 答案的补充，添加 .focus() 对我有用。

  $("input[type='image']").click(function() {
    $("input[id='my_file']").focus().click();
  });