Question

我需要一个解决方案，在点击div时在HTML中显示打开的文件对话框。单击div后，必须打开打开文件对话框。

我不想将输入文件框显示为HTML页面的一部分。它必须显示在单独的对话框中，该对话框不是网页的一部分。

Answer 1

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

IE的

添加：

$("#logo").css('filter','alpha(opacity = 0');

Answer 2

这是一个很好的

Fine Uploader demo

它本身就是<input type='file' />控件。但是将div放在那个上面并且应用css样式来获得这种感觉。文件控件的不透明度设置为0，以便在单击div时显示对话框窗口打开。

Answer 3

我不知道为什么没有人指出这一点，但这是一种没有任何Javascript的方式，它也兼容任何浏览器。

编辑：在Safari中，input在隐藏display: none时被禁用。更好的方法是使用position: fixed; top: -100em。

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

如果您愿意，可以使用for中的label指向输入的id，以“正确方式”：< / p>

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Answer 4

实际上，你不需要所有那些具有不透明度，可见度，<input>样式等的东西。只需看看：

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

jsFiddle上的演示。在Chrome 30.0和Firefox 24.0中测试过。但是，在Opera 12.16中没有用。

Answer 5

这对我来说效果最好（在IE8，FF，Chrome，Safari上测试过）。

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

<强>说明：我将文件输入直接定位在要单击的元素上方，因此任何单击都会落在它或其标签上（这会拉动上传对话框，就像您单击标签本身一样）。我有一些问题，默认输入的按钮部分突出了标签的一侧，因此输入上的overflow: hidden和标签上的display: inline-block是必要的。

Answer 6

如果客户端计算机上的javascript被关闭怎么办？对所有方案使用以下解决方案。你甚至不需要javascript / jQuery。：

<强> HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

<强> CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

说明：for="Your input Id"。默认情况下，通过HTML触发单击事件。所以它默认触发click事件，不需要jQuery / javascript。如果它只是通过HTML完成为什么使用jQuery / jScript？你不能告诉客户是否禁用了JS。即使JS已关闭，您的功能也应该可以正常工作。

Working jsFiddle （你不需要JS，jquery）

Answer 7

首先添加 head 标记：

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

如果您已经有脚本标记，只需在上面添加这些功能。

在正文或表单标记中添加：

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

无论你的html在哪里，只是那样你已经创建了一个类型为OpenFileDialog的新实例全局变量，其名称为<该元素的strong> id ，无论您的代码或xaml位于何处，在您的脚本或代码中但，您都无法输入他的名字，然后读取属性或调用函数，因为有全局函数执行那些未在元素输入类型=＆＃34;文件＆＃34;中定义的函数。你只需要给这些函数赋予隐藏输入类型的id =＆＃34; file＆＃34;这是OpenFileDialog实例的名称，作为字符串。

为了简化您为html创建打开文件对话框实例的生活，您可以创建一个能够执行此操作的函数：

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

如果要删除打开文件对话框，则可以创建并使用以下函数：

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

但在删除打开的文件对话框之前，请通过制作和使用以下函数来确保它存在：

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

如果您不想在html中的正文或表单标记中创建和添加打开的文件对话框，因为这会添加隐藏的输入type =＆＃34; file＆＃34; s，然后你可以使用上面的create function在脚本中完成：

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

确保靠近您的身体或表格标签，您添加了：

onload="yourBodyOrFormId_onload()"

如果你已经这样做，你不必在上面这一行。

提示：如果您还没有，可以将新的JScript文件添加到您的项目或网站中，并且在此文件中，您可以将所有打开的文件对话框功能放在远离脚本标记和html或Web表单页面，并在此JScript文件的html或Web表单页面中使用它们，但在将html或Web表单页面链接到之前不要忘记当然是JScript文件。您只需将JScript文件拖到 head 标记中的html页面即可。如果您的网页是网页形式而不是简单的html，并且您没有头标记，那么请将其放在任何位置，以便它可以正常工作。不要忘记在该JScript文件中定义全局变量，其值将是您的正文或表单ID为字符串。将JScript文件链接到html或Web表单页面后，可以加载表单主体的事件，将该变量的值设置为正文或表单ID。然后在JScript文件中，您不必再向文档提供一个页面的正文或形式的id，只需给它该变量的值。您可以将该变量称为 bodyId 或 formId 或 bodyOrFormId 或您想要的任何其他名称。

祝你好运！

Answer 8

可能你可能对此感兴趣： http://code.google.com/p/upload-at-click/

点击元素将打开“打开文件”对话框和

运行自定义功能。

Answer 9

AFAIK你还需要一个<input type="file">元素，然后你可以使用quirksmode中的一些东西来设置它

Answer 10

唯一没有<input type="file">的是在div上嵌入透明的Flash影片。然后，您可以使用用户生成的点击事件（符合Flash 10新安全规则）来触发对Flash FileReference.browse的调用。

它提供了对quirksmode way的附加依赖性，但作为回报，您会获得更多事件（例如内置进度事件）。

Answer 11

最简单的方法：

＆＃13;

#fileInput {
  display: none;
}

＆＃13;

<label for="fileInput">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="fileInput"/>

＆＃13;

重要的是，使用display: none确保隐藏文件输入不会占用任何地方（使用opacity: 0会发生什么）。

Answer 12

简单的答案。

（1）将输入元素type =“ file”放在页面上的任意位置，并设置属性type =“ hidden”或style =“ display：none”。为输入元素指定一个ID。例如id =“ myid”

（2）选择要用于打开文件对话框的任何div，图像，按钮或任何元素，并为其设置onclick属性，例如， onclick =“ document.getElementById（'myid'）。click（）”

仅此而已。

Answer 13

可以使用

$('<input type="file" />').click()

在JavaScript中打开文件对话框

13 个答案: