我如何寫入兩個幾乎相同的JavaScript函數到一個，基於addEventListener的屁股觸發器

我已經花了大部分時間來包裝我的頭。我有兩種觸發同一事件的方法。 1.通過點擊輸入文件選擇器或 2.通過將文件拖放到「拖放區」我如何寫入兩個幾乎相同的JavaScript函數到一個，基於addEventListener的屁股觸發器

事件之間的唯一區別是文件API使用不同的方法。並且似乎在eventListeners函數調用中允許的唯一參數是（event）。我可能錯過了一些東西，但任何幫助，非常感謝

但它真的很煩人，只是複製粘貼幾乎相同的代碼。有沒有辦法將這兩個函數「fileSelect（event）和dropSelect（event）」寫入一個？

的代碼：

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

來源

2013-02-12 Malthe Milthers

+1屁股觸發。 – 2013-02-12 16:12:16

這是相同的方法：重構出不同的部分並將其傳遞給重構函數 - 它是一個獲取'selectedFile'的單個參數。 – 2013-02-12 16:13:10

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-12 16:15:41 Andreas

不||返回true或false，它真的有效嗎？ – Piyuesh 2013-02-12 16:19:01

它返回的第一部分評估爲'真' – Andreas 2013-02-12 16:21:09

謝謝，我明白了。 – Piyuesh 2013-02-12 16:22:55

因子出公共代碼：

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-12 16:13:43

這可能工作在@andreas代碼變化 selectedFile =（event.dataTransfer || event.target ）.files [0];

到

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

來源

2013-02-12 16:21:13 Piyuesh

我如何寫入兩個幾乎相同的JavaScript函數到一個，基於addEventListener的屁股觸發器

回答

相關問題