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

我需要你的帮助

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

你是怎么做到的？我不想使用input type=file方法，因为我不要求特定的输入出现在我的页面上

即：

---

允许用户选择文件的唯一方法是使用1。您不必让此元素可见，只需在页面上即可

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

您可以使用display:none隐藏upload元素，然后让另一个JavaScript函数以编程方式触发它。注意：此方法在Opera和其他浏览器中不起作用。它在Chrome、Firefox和IE8/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>

演示：在以下位置编辑：

在包括Opera在内的大多数浏览器中，另一种应该工作的方法是使file upload元素不可见，并在其上放置一个元素。所以，当你点击你认为是一个按钮时，你实际上是在点击上传元素。像AJAX这样的上传程序使用这种方法来允许您设置上传按钮的样式

<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>

演示：在以下位置编辑：

---

1哦，如果你真的想成为一名花花公子，你可以使用拖放。我在这里做了一个快速演示：在以下位置编辑：

你不能做你想做的事。如果不使用，则无法打开文件选择对话框。即使您使用了它，您也只能获取文件名，无法获取其完整路径，这是一个巨大的安全隐患。如果你不想显示输入，你可以隐藏它，然后用JavaScript触发它。@RocketHazmat实际上，我认为你不能用JavaScript触发它。你说的其他一切听起来都很好：但我认为可能只是在IE中，一些浏览器不允许你以编程方式打开它。您必须将其隐藏起来，并诱使用户单击不透明、堆叠的文件输入…至少要与跨浏览器兼容。@Ian:我制作了一个显示的快速演示：无输入，触发其单击方法似乎有效；至少在Chrome、Firefox和IE9中是这样。不管怎样，另一种方法也有效。我知道我在我的网站上使用的AJAX上传程序就是这样做的。@RocketHazmat就是一个很好的例子。我想我以前读过，它并不完全兼容所有浏览器。阅读和它可能的复制品的某种组合只是一个如何不一致的想法。当然，我猜不一致性主要在于旧IE和Opera以及旧版本的FF/Chrome。当然，我们不应该总是为过去编写代码，但我想指出这一点。具体来说，不透明/堆叠技巧应完全consistent@Ian当前位置我的示例在最新的Opera中似乎不起作用，在IE<9中也可能不起作用。关于不透明技巧的一个好例子，请看这个上传程序：

<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>