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/

已编辑此接缝是一个普遍的问题/答案。
所以我用以下信息更新了这个答案，包括跨浏览器不透明度线支持。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我对Jquery的建议是保留div和<div id="id">Open</div> <input id="yourinputname" type="file" name="yourinputname" style="display: none;" />。输入应该隐藏起来并使用JQuery触发输入点击，如下所示

<强> HTML

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

<强>的jQuery

stats

请参阅fiddle

Answer 4

我的文件上传表单，带有引导程序和字体真棒

<html>
<head>
  <link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="path/to/fontawesome-all.css" />
</head>

<body>

  <form method="post" action="upload.php" enctype="multipart/form-data" >
    <div class="card mb-4 shadow-sm p-4">
       <h4 class="my-0 font-weight-normal">Upload File</h4>
       <div class="card-body">
         <h2 class="card-title">

           <label style="cursor: pointer;" for="file_upload">
             <span class="text-muted fa fa-upload"></span>
           </label>
           <input type="file" id="file_upload" class="d-none"/>

         </h2>
       </div>
    </div>
  </form>

</body>
</html>

单击div而不是文件输入标记

4 个答案:

请参阅fiddle