上传图片原生

162 阅读1分钟
<input type="file" name="uploadFile" id="fileInput" accept="image/*" class="file" />
document.querySelector('#fileInput').addEventListener('change', fileSelect, false)
function fileSelect(e) {
    // 获取input file的files文件对象                  
    const file = e.target.files || e.dataTransfer.files
    if (file) {
        // 创建用来读取此文件的对象
        const reader = new FileReader()
        // 校验文件上传
        if (!checkFile(file[0])) return
        reader.readAsDataURL(file[0])
        reader.onloadend = async function (event) {
            // 赋值给浏览的img是base64编码格式的地址
            $('#selectImg').get(0).src = event.target.result
            // 允许重复上传同一个文件
            e.target.value = ''
            // 图片重新剪裁大小
            const data = await cutImgSize(reader.result)
            // 此处发起ajax请求上传图片
            fileInputRequest(data)
        }
    }
}

function checkFile(file) {
    if (!file.type.match('image.*')) {
        alert("画像ファイルを選択してください。")
        return false
    }
    if (file.size > 1024 * 1024 * 2) {
        alert("画像サイズが2メガ以上の場合、圧縮してからアップロードしてください。")
        return false
    }
    return true
}

function cutImgSize(result) {
    const tempImg = new Image()
    tempImg.src = result
    return new Promise(resolve => {
        tempImg.onload = function () {
            const MAX_WIDTH = 200
            const MAX_HEIGHT = 200
            let tempW = tempImg.width
            let tempH = tempImg.height
            if (tempW > tempH) {
                if (tempW > MAX_WIDTH) {
                    tempH *= MAX_WIDTH / tempW
                    tempW = MAX_WIDTH
                }
                // console.log(1, tempW, tempH)
            } else {
                if (tempH > MAX_HEIGHT) {
                    tempW *= MAX_HEIGHT / tempH
                    tempH = MAX_HEIGHT
                }
                // console.log(2, tempW, tempH)
            }
            const canvas = document.createElement('canvas')
            canvas.width = tempW
            canvas.height = tempH
            const ctx = canvas.getContext("2d")
            ctx.drawImage(this, 0, 0, tempW, tempH)
            const dataURL = canvas.toDataURL("image/jpeg")
            resolve('image=' + dataURL)
        }
    })
}

function fileInputRequest(data) {

}