单击 div 而不是文件输入标签时打开文件选择

Question

我想设计一个图片上传器。为了选择图像，我们这样做：

 <input type="file" />

但我不想使用常规输入，我有一个 div 我希望当用户单击它时，文件选择对话框打开，之后一切都以标准方式继续。

我想使用 Angular.js 而不是 jQuery 如果可能的话因为我的项目在 Angular.js

原文由 Fcoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不需要 javascript 来执行此操作，请不要查看内联样式

<div style="position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center;" >
    Open
    <input type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" />
</div>

请注意，您需要添加更多跨浏览器不透明行

请参阅演示 http://jsfiddle.net/yp2dykn5/

将此接缝 编辑 为流行的问题/答案。

所以我用下面的信息更新了这个答案，包括跨浏览器不透明线支持。

 div {
   position: relative;
   border: 1px solid red;
   width: 50px;
   height: 30px;
   line-height: 30px;
   text-align: center;
}

.file_upload {
   opacity: 0.0;

   /* IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

   /* IE 5-7 */
   filter: alpha(opacity=0);

   /* Netscape or and older firefox browsers */
   -moz-opacity: 0.0;

   /* older Safari browsers */
   -khtml-opacity: 0.0;

   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height:100%;
}

 <form>
  <div>
     Open
     <input type="file" class="file_upload" />
  </div>
</form>

原文由 Raymond Nijland 发布，翻译遵循 CC BY-SA 4.0 许可协议