1

私は今日のほとんどをこのことに頭を悩ませてきました。同じイベントをトリガーする方法は 2 つあります。1. input:file セレクターをクリックする、または 2. ファイルを「ドロップゾーン」にドラッグアンドドロップする

イベント間の唯一の違いは、ファイル API が異なるアプローチを使用することです。eventListeners 関数呼び出し内で許可される唯一の引数は (event) のようです。私は何かを見逃しているかもしれませんが、どんな助けも大歓迎です

しかし、ほとんど同じコードをコピペするのは本当に面倒です。これら 2 つの関数「fileSelect(event) と dropSelect(event)」を 1 つに書き込む方法はありますか?

コード：

function fileSelect(event){

    event.stopPropagation();
    event.preventDefault();

    selectedFile = event.target.files[0];       //Uses ".files" from the file API in HTML5. In this case accessing info on a single file (files[0]).

    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + selectedFile.name;
    document.getElementById('filetype').innerHTML = "filetype: " + selectedFile.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(selectedFile.size/1024).toFixed(1) + " kb";
}

//parse the info from a drag'n'drop-selected image. WRITE THESE 2 FUNCTIONS INTO ONE!
function dropSelect(event){

    event.stopPropagation();
    event.preventDefault();

    selectedFile = event.dataTransfer.files[0];     //Uses ".files" from the file API in HTML5. In this case accessing info on a single file (files[0]).

    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + selectedFile.name;
    document.getElementById('filetype').innerHTML = "filetype: " + selectedFile.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(selectedFile.size/1024).toFixed(1) + " kb";
}




//add onchange event to the file_select input:file. This will run function "fileSelect", onChange. 
document.getElementById('file_select').addEventListener('change', fileSelect, false);

//start fileselect when drag'n'drop.
function handleDragOver(event){
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
}

document.getElementById('upload_box').addEventListener('dragover', handleDragOver, false);
document.getElementById('upload_box').addEventListener('drop', dropSelect, false);
4

3 に答える 3

2 
function select(event){
    event.stopPropagation();
    event.preventDefault();

    selectedFile = (event.dataTransfer || event.target).files[0];

    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + selectedFile.name;
    document.getElementById('filetype').innerHTML = "filetype: " + selectedFile.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(selectedFile.size/1024).toFixed(1) + " kb";
}
于 2013-02-12T16:15:41.117 に答える
0

これは、@andreasコードで変更を機能させる可能性がありますselectedFile=（event.dataTransfer || event.target）.files [0];

に

selectedFile = (event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0]);
于 2013-02-12T16:21:13.537 に答える
0

一般的なコードを除外します。

function insertFileInfo(file) {
    //Insert file info
    document.getElementById('filename').innerHTML = "filename: " + file.name;
    document.getElementById('filetype').innerHTML = "filetype: " + file.type;
    document.getElementById('filesize').innerHTML = "filesize: " + parseFloat(file.size/1024).toFixed(1) + " kb";
}

function fileSelect(event){
    event.stopPropagation();
    event.preventDefault();
    insertFileInfo(event.target.files[0]);
}

function dropSelect(event){
    event.stopPropagation();
    event.preventDefault();
    insertFileInfo(event.dataTransfer.files[0]);
}
于 2013-02-12T16:13:43.537 に答える