Question

我有一个<img ... />标记，我已将jQuery中的click事件绑定到了。单击它时，我想让它模拟文件上传中的按钮单击以打开文件系统浏览弹出窗口。我在点击功能中尝试过这些东西并没有成功：

...
$(".hiddenUploadBtn").click();
...

...
$(".hiddenUploadBtn").select();
...

...
$(".hiddenUploadBtn").submit();
...

Answer 1

只使用javascript试试这个： http://code.google.com/p/upload-at-click/

演示： http://upload-at-click.narod.ru/demo2.html

Answer 2

将img包装在标签中，并将for属性设置为文件输入。适用于任何类型的内容，它内置于规范中。你甚至可以在那时隐藏文件输入。

<input type="file" id="fileUpload"><br>
<label for="fileUpload">
    <img src="https://www.google.com/images/srpr/logo11w.png" />
</label>

Answer 3

这对我有用

<input name="picture" type="file" onchange="alert(this.value)" class="file" size=20/>

使用上传按钮作为图像试试这个

<style>
div.fileinputs {position:relative; display:inline;}
div.fakefile {position:absolute; top:0px; left:0px; z-index:1;}
input.file {position:relative; text-align:right; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2;}
<style>

<div class="fileinputs">
  <input name="picture" type="file" onchange="alert(this.value)" class="file" size=1/>
  <div class="fakefile">
    <img src="images/browse.gif" align="middle" alt="browse" title="browse"/>
  </div>
</div>

所以输入字段是隐藏的，当你点击图像时 - 会出现选择对话框，但是从js imposible模仿这个对话框，是的。但你也可以为浏览器编写插件/ hack）

Answer 4

您可以根据需要设置自定义按钮的样式并隐藏当前输入文件。所以当点击新按钮时，它会触发文件上传。

$(document).ready(function(){
  $('#newUploadButton').click(function(e){
     e.preventDefault();
     $('#formTest input[type="file"]').click();
  });
});

#fileUpload { display: none; }

#newUploadButton {
  background: #f2f2f2 url(images/icons/upload.png) no-repeat center left;
  color: #333;
    font-size: 14px;
    padding: 12px 12px 12px 40px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="" id="formTest" name="">
  <input type="file" id="fileUpload">
  <a href="#" id="newUploadButton">Upload here</a>
</form>

Answer 5

规范说它应该可以在Chrome上运行，而且确实可以运行。但是，Firefox和其他常见浏览器不遵守规则，所以你是SOL。

在jQuery中模拟文件上载单击

5 个答案: