如何在点击图片按钮上传新文件

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>