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>

DEMO：http://jsfiddle.net/rJA7n/3/show（编辑于http://jsfiddle.net/rJA7n/3/）

在大多数浏览器（包括Opera）中应该起作用的另一种方法是使文件上传元素“不可见”并在其上放置一个元素。因此，当您点击您认为是按钮时，您实际上是在点击上传元素。 AJAX上传者（如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>

DEMO：http://jsfiddle.net/cKGft/4/show/（编辑于http://jsfiddle.net/cKGft/4/）

_{¹好吧，如果你想要真正喜欢的话，可以使用拖放功能。我在这里做了一个快速演示：http://jsfiddle.net/S6BY8/2/show（编辑：http://jsfiddle.net/S6BY8/2/）}

打开一个javascript对话框，将完整的文件位置存储到var中

1 个答案: