javascript - 打开 javascript 对话框以将完整文件位置存储到 var 中

Question

我需要你的帮助。

我想设计一个javascript函数，这样当我调用它时，它会打开一个对话框，要求我导航到所选文件，一旦我单击“打开”按钮，它就会保存文件的路径到变量中。

你是如何做到这一点的？我不喜欢 input type="file"方法，因为我不需要该特定输入位于我的页面上。

即:

function getlocation() {
var x = popup the open file dialog box and let the user select a file
}

Answer 1

允许用户选择文件的唯一方法是使用 <input type="file" /> ¹。您不必让该元素可见，只需在页面上可见即可。

当用户选择一个文件时，您所能得到的只是它的名称。你无法获取它的路径。另请注意，文件上传元素是异步的。您需要使用onchange事件(回调)来获取名称。

您可以使用 display: none 隐藏上传元素，然后让另一个 JavaScript 函数以编程方式触发它。 (注意:此方法在 Opera 中不起作用，可能在其他浏览器中不起作用。已在 Chrome、Firefox 和 IE 8/9 中测试)

<style>
    #getFile{
        display: none;
    }
</style>

<input type="file" id="getFile" />
<button id="openFile" type="button">Click Me</button>

<script>
    var uploadElement = document.getElementById('getFile'),
        uploadTrigger = document.getElementById('openFile'),
        openFileUpload = function(){
            uploadElement.click();
        },
        alertValue = function () {
            alert(uploadElement.value);
        };

    if (window.addEventListener) {
        uploadTrigger.addEventListener('click', openFileUpload);
        uploadElement.addEventListener('change', alertValue);
    } else {
        uploadTrigger.attachEvent('onclick', openFileUpload);
        uploadElement.attachEvent('onchange', alertValue);
    }
</script>

演示:http://jsfiddle.net/rJA7n/3/show (编辑地址:http://jsfiddle.net/rJA7n/3/)

另一种适用于大多数浏览器(包括 Opera)的方法是使文件上传元素“不可见”并在其上放置一个元素。因此，当您单击您认为的按钮时，您实际上是在单击上传元素。 AJAX uploader (如 http://fineuploader.com/ )使用此方法允许您“设置”上传按钮的样式。

<style>
    #getFile{
        width: 100px;
        opacity: 0;
        filter: alpha(opacity = 0);
    }

    #openFile{
        display: inline;
        margin-left: -100px;
        background-color: red;
        height: 30px;
        width: 100px;
        padding: 10px;
        color: white;
        text-align: center;
    }
</style>

<input type="file" id="getFile" />
<div id="openFile">Click Me</div>

<script>
    var uploadElement = document.getElementById('getFile'),
        alertValue = function(){
            alert(uploadElement.value);
        };

    if(window.addEventListener){
        uploadElement.addEventListener('change', alertValue);
    }
    else{
        uploadElement.attachEvent('onchange', alertValue);
    }
</script>

演示:http://jsfiddle.net/cKGft/4/show/ (编辑地址:http://jsfiddle.net/cKGft/4/)

_{¹ 好吧，如果您想要真正的花哨，您可以使用拖放。我在这里做了一个快速演示:http://jsfiddle.net/S6BY8/2/show (编辑地址:http://jsfiddle.net/S6BY8/2/)}