在 JavaScript 中打开文件对话框

小开

AFAIK 你仍然需要一个 <input type="file">元素，然后你可以使用从离奇莫德的一些东西来设计它

小开

最佳答案

这个不错

很好的上传器演示

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

小开

唯一没有 <input type="file">的是通过在 div 上嵌入一个透明的 flash 影片。然后，您可以使用用户生成的 click 事件(符合 Flash 10新的安全规则)来触发对 Flash 的浏览的调用。

它提供了对离奇古怪的方式的附加依赖，但是作为回报，您可以获得更多的事件(例如内置的进度事件)。

小开

    $("#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');

小开

首先添加头标记:

<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 类的新实例作为 全球性的变量，它的名字是元素的 身份证，不管在你的代码中的哪个位置，或者在你的脚本或者代码中的 xaml，但是，你都键入它的名字，然后读取一个属性或者调用一个函数，因为有一些全局函数做那些在元素 input type = “ file”中没有定义的事情。您只需要给这些函数赋予隐藏输入 type = “ file”的 id，这是 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 = “ file”s，那么你可以使用上面的 create 函数在脚本中创建:

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 表单页面中移开，然后在你的 html 或者 web 表单页面中从这个 JScript 文件中使用它们，但是不要忘记之前把 html 或者 web 表单页面链接到 JScript 文件中。只需要在头标记中将 JScript 文件拖动到 html 页面即可。如果你的页面是 web 表单而不是简单的 html，并且你没有头标签，那么把它放在任何地方，这样它就可以工作了。不要忘记在 JScript 文件中定义全局变量，其值将是您的 body 或表单 id 作为字符串。将 JScript 文件链接到 html 或 web 表单页面之后，就可以加载表单主体的事件，将该变量的值设置为主体或表单 id。然后在 JScript 文件中，您不必再给文档一个主体的 id 或者一个页面的形式，只需要给它一个变量的值。您可以调用该变量 身份证或 FormId或 Body OrFormId或任何其他名称。

祝你好运！

小开

实际上，你不需要所有那些不透明、可见性、 <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中无法工作。

小开

我不知道为什么没有人指出这一点，但这里有一种方法可以做到这一点，没有任何 Javascript，它也兼容任何浏览器。

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

编辑2: 一种不同的方法是使用 opacity: 0。问题是它可能会扰乱布局。为了说明这个问题，我在示例中添加了一些 CSS。

label {
display: inline-block;
background: #ddd;
border: 1px outset #ccc;
border-radius: .3em;
padding: .3em 1em;
margin: .5em;
}


label:active {
border-style: inset;
}

<label>
Using <code>position: fixed</code>
<input type="file" style="position: fixed; top: -100%">
</label>


<label>
Using <code>opacity: 0</code>
<input type="file" style="opacity: 0">
</label>

如果你愿意，你可以使用 label中的 for指向输入的 id来进行 “正确的方式”，如下所示:

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

小开

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

超文本标示语言

<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 中单击事件。所以默认情况下，它触发单击事件，不需要 jQuery/javascript。如果它只是由 HTML 完成，为什么要使用 jQuery/jScript？而且你不知道客户端是否禁用了 JS。即使关闭了 JS，您的特性也应该能够工作。

使用 jsFiddle (您不需要 JS，jquery)

小开

这是什么工作最适合我(测试在 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的标签是必要的。

小开

最简单的方法:

#file-input {
display: none;
}

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

重要的是，使用 display: none可以确保隐藏文件输入不会占用任何位置(使用 opacity: 0会发生什么情况)。

小开

可以使用

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

小开

将输入元素 type="file"放在页面的任何位置，并用 style="display:none"隐藏它。

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

选择任何你想用来打开文件对话框的 div、图像、按钮或者任何元素，为它设置一个 onclick 属性，像这样:

<a href="#" onclick="document.getElementById('myid').click()"/>

小开

这是我在找不到一个好的解决方案后开发的一个解决方案

let input = document.createElement("input");
input.type = "file";
input.setAttribute("multiple", true);
input.setAttribute("accept", "image/*");
input.onchange = function (event) {
//
console.log(this.files);
};
input.click();