如何通過單擊圖像按鈕上傳新文件

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

如果您正在尋找跨瀏覽器兼容的解決方案，您應該查看 plupload( http://www.plupload.com ) 它支持圖像按鈕以及我記得的。

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

不需要 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 6

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

請檢查此博客中的第 4 個答案。

如何自定義瀏覽按鈕？

您可以使用您的圖像作為.button類的背景圖像。

Answer 7

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

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

Answer 8

您也可以使用它來訪問您上傳的文件，因為在 PHP 中您無法訪問標簽內的文件。

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