0

あなたの助けが必要です。

JavaScript 関数を設計したいと思います。呼び出すと、選択したファイルに移動するように求めるダイアログ ボックスが開き、[開く] ボタンをクリックすると、ファイルのパスが次の場所に保存されます。変数。

これどうやってやるの？特定の入力が自分のページにある必要がないため、input type="file" メソッドは使用したくありません。

すなわち:

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

1 に答える 1

2

ユーザーがファイルを選択できるようにする唯一の方法は、<input type="file" />1を使用することです。この要素をページ上に表示する必要はありません。

ユーザーがファイルを選択すると、そのファイルから取得できるのはその名前だけです。そのパスを取得できません。また、ファイル アップロード要素は非同期であることに注意してください。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 を含む) で機能するもう 1 つの方法は、ファイル アップロード要素を「非表示」にして、その上に要素を配置することです。つまり、ボタンと思われるものをクリックすると、実際にはアップロード要素をクリックしていることになります。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>

デモ: http://jsfiddle.net/cKGft/4/show/ (編集: http://jsfiddle.net/cKGft/4/ )

1ええと、本当に派手にしたい場合は、ドラッグ アンド ドロップを使用できます。ここで簡単なデモを作成しました: http://jsfiddle.net/S6BY8/2/show (編集: http://jsfiddle.net/S6BY8/2/ )

于 2013-04-12T17:42:54.617 に答える