在 jQuery 中模拟文件上传点击答案

【问题标题】：Emulate a file upload click in jQuery在 jQuery 中模拟文件上传点击
【发布时间】：2009-07-15 18:20:47
【问题描述】：

我有一个<img ... /> 标签，我在jQuery 中绑定了一个点击事件。单击它时，我希望它模拟单击文件上传上的按钮以打开文件系统浏览弹出窗口。我在 click 函数中尝试了这些东西，但没有成功：

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

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

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

【问题讨论】：

您应该接受 Adam McCormick 的新答案，这显然是正确的。我想删除我的，但我不能，因为这是公认的答案。
已接受的答案已更新。感谢您的评论。

标签： javascript jquery events

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这是基于 PHP 的，有些人不是在寻找 PHP 解决方案。
我正在使用这个js 文件。它工作得很好。在 chrome 和 IE 中，我们可以获得完整的路径名，但在 mozilla 中，我们无法获得完整的路径。我们只能获取文件名....那么，我们如何在 mozilla 中获取完整路径？

【解决方案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 模拟这个对话框是不可能的，是的。但你也可以为浏览器编写插件/hack）

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

规范说它应该可以在 Chrome 上工作，而且确实可以。但是火狐等常见浏览器不遵守规则，所以你是SOL。

【讨论】：

请发布您所指规范的链接。此外，“规范”和浏览器实现之间存在差异。例如，是否所有浏览器都按照规范进行 CSS 渲染？显然不是。所以仅仅因为规范说它应该工作并不意味着浏览器让它工作。