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

Question

我想设计一个图像上传器.为了选择图像,我们这样做:

<input type="file" />

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

我希望使用Angular.js而不是jQuery因为我的项目不在可能Angular.js

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>

请注意,您需要添加更多的crossbrowser opacity行

见演示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>

Answer 2

我对 Jquery 的建议是保留一个 div 和一个input[type="file"].The 输入应该隐藏并使用 JQuery 触发输入的点击，如下所示

HTML

<div id="id">Open</div>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />

jQuery

$('#id').on('click', function() {
    $('#yourinputname').trigger('click');
});

看小提琴

Answer 3

我会使用一个隐藏的input配对与一个label样式设置为我想要的元素。

#getFile {
  display: none;
}
#getFileLabel {
  display: inline-block;
  background: red;
  height: 50px;
  width: 100px;
}

<label id="getFileLabel" for="getFile">Open File</label>
<input type="file" id="getFile" />