JS文件上傳

<input> type 類型為 file 時使得用戶可以選擇一個或多個元素以提交表單的方式上傳到服務器上，或者通過 Javascript 的 File API 對文件進行操作 .

 

常用input屬性：

　　accept：指示file類型，沒有時表示不限制類型，填入格式后選擇文件時只能看見被允許的文件

　　　　　　accept="image/png" 或 accept=".png" 表示只接受 png 圖片.

　　　　　　accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" 表示接受 PNG/JPEG 文件.

　　　　　　accept="image/*" 接受任何圖片文件類型. audio/* 表示音頻文件video/* 表示視頻文件

　　　　　　accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"  接受任何 MS Doc 文件類型.

　　　　　　accept 屬性並不會驗證選中文件的類型. 他只是為開發者提供了一種引導用戶做出期望行為的方式而已, 用戶還是有辦法繞過瀏覽器的限制.

　　　　　　因此, 在服務器端進行文件類型驗證是必不可少的.

　　multiple：Boolean ，指示用戶能否多個輸入，type為email或file時生效

　　required：指定用戶在提交表單之前必須保證該元素值不為空。當 type 屬性是 hidden，image 或者按鈕類型（submit，reset，button）時不可使用。

　　　　　　　:optional 和 :required CSS 偽元素的樣式將可以被該字段應用作外觀。

 

事件：

　　change事件

 

示例

樣式更改：可以通過設置opcitity：0；font-size:0進行覆蓋操作

<template>
    <div>
        <!-- 上傳處觸發change事件 -->
        <input type="file" id="upload" multiple @change="upload"></input>
    </div>
</template>

<script>
    export default {
        methods: {
            upload(e) {
                // 獲取文件信息
                // let files=document.getElementById('upload').files
                // let file = e.target.files[0]

                // 每個 file 對象包含了下列信息: 
                // name: 文件名.
                // lastModified: UNIX timestamp 形式的最后修改時間.
                // lastModifiedDate: Date 形式的最后修改時間.
                // size: 文件的字節大小.
                // type: 文件類型.

                // 轉化為base64
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (res) {
                    let base = res.target.result
                }

                // 獲取/限制圖片尺寸
                let myimg = URL.createObjectURL(file);
                let img = new Image();
                img.src = myimg;
                img.onload = function () {
                    if (img.width !== 860 && img.height !== 450) {
                        alert("只能上傳860*450px的圖片！");
                    } else {
                        // 操作……
                        // 還可以根據file.type判斷類型，根據file.size限制判斷字節,1M = 1024 * 1024
                        const formdata = new FormData()
                        formdata.append('file', file)
                        // 調接口，data為formdata
                    }
                }
            }
        }
    };
</script>

 

獲取視頻第一幀

            let dataURL = "";
            let video = $(".empty_box_video video").get(0);
            $(".empty_box_video video").attr("crossOrigin", "anonymous"); //處理跨域
            video.addEventListener("loadeddata", function () {
                setTimeout(() => {
                    let canvas = document.createElement("canvas");
                    canvas.width = 400;
                    canvas.height = 300;
                    canvas.getContext("2d").drawImage(video, 0, 0, 400, 300); //繪制canvas
                    dataURL = canvas.toDataURL(); // 第一幀url,轉換為base64
                    $('#aaa').attr("src", dataURL);
                }, 2000);
            });