JavaScript 上傳檔案取得檔案資訊 示範

筆者原本想要使用 JavaScript 取得本機上傳的檔案的檔案建立時間，但是發現在瀏覽器中的 JavaScript 無法達成這件事情，一定要的話也是要上傳到後端伺服器後才有辦法取得檔案建立時間。不過 JavaScript 可以取得檔案修改時間，其他可以取得的資訊如下:

    
<input type="file" id="fileInput">

<script>
    // 監視檔案上傳事件
    document.querySelector('#fileInput').addEventListener('change', function (event) {
        var files = event.target.files;

        for (const file of files) { // 處理每一個上傳的檔案
            const date = new Date(file.lastModified);
            console.log(`檔名: ${file.name}`);
            console.log(`檔案大小: ${file.size} bytes`);
            console.log(`檔案類型: ${file.type}`);
            console.log(`最後修改時間: ${date}`);
        }
        
    /*
    檔名: test1.png
    檔案大小: 20625 bytes
    檔案類型: image/png
    最後修改時間: Sun Jun 04 2023 00:02:54 GMT+0800 (台北標準時間)
     */
    });
</script>
    

選擇檔案並顯示圖片

    
<input type="file" id="fileInput">
<br>
<img id="previewImage" alt="預覽圖片" src="">

<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        // 確認是否有選擇檔案
        const files = event.target.files;
        if (files.length === 0) {
            alert('請選擇檔案');
            return;
        }

        const file = files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('previewImage').src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
</script>
    

選擇檔案並建立檔案下載連結

    
<input type="file" id="fileInput">
<br>
<a id="downloadLink" style="display: none;">下載</a>

<script>
    document.getElementById('fileInput').addEventListener('change', function(event) {
        // 確認是否有選擇檔案
        const files = event.target.files;
        if (files.length === 0) {
            alert('請選擇檔案');
            return;
        }

        const file = files[0];
        const downloadLink = document.getElementById('downloadLink');

        // 設定下載連結的屬性
        downloadLink.setAttribute('href', URL.createObjectURL(file));
        downloadLink.setAttribute('download', file.name);

        // 顯示下載連結
        downloadLink.style.display = 'block';
    });
</script>
    

參考資料：
mdn web docs - Using files from web applications