picgo/static/js/index.js

function Index() {

}
//阻止浏览器默认行。
Index.prototype.HoldbackBorwser = function () {
    $(document).on({
        dragleave: function (e) {    //拖离
            e.preventDefault();
        },
        drop: function (e) {  //拖后放
            e.preventDefault();
        },
        dragenter: function (e) {    //拖进
            e.preventDefault();
        },
        dragover: function (e) {    //拖来拖去
            e.preventDefault();
        }
    });
}

//监听拖拽事件
Index.prototype.MonitorDrop = function () {
    let self = this
    let box = document.getElementById('upload-btn-click'); //拖拽区域
    box.addEventListener("drop", function (e) {
        e.preventDefault(); //取消默认浏览器拖拽效果
        let fileList = e.dataTransfer.files; //获取文件对象
        //循环遍历文件对象
        for (let i = 0; i < fileList.length; i++) {
            //检测文件是不是图片
            if (fileList[i].type.indexOf('image') === -1) {
                Alert.AlertError("您拖的不是图片！")
                return false;
            }
            //拖拉图片到浏览器，可以实现预览功能
            // let img = window.URL.createObjectURL(fileList[i]);
            // let filename = fileList[i].name; //图片名称
            // let filesize = Math.floor((fileList[0].size) / 1024);
            // if (filesize > 2048) {
            //     Alert.AlertError("上传大小不能超过2M.")
            //     return false;
            // }
            //上传
            self.UploadFile(fileList[i]);
        }
    }, false);
}

//上传图片
Index.prototype.UploadFile = function (file) {
    let filesize = Math.floor((file.size) / 1024);
    if (filesize > 2048) {
        Alert.AlertError("上传大小不能超过2M.")
        return false;
    }
    let formData = new FormData();
    formData.append('file', file);
    let csrfToken = document.getElementsByName("gorilla.csrf.Token")[0].value
    //开始上传图片
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        headers: {
            "X-CSRF-Token": csrfToken
        },
        success: function (result) {
            if (result.status === 200) {
                Alert.AlertSuccessToast("上传成功！")
                // alert("上传成功！文件名为：" + result.data);
            } else {
                Alert.AlertError(result.message)
                return false;
            }
        },
        error: function () {
            Alert.AlertError("服务器内部错误")
        }
    })
}



Index.prototype.UploadClick = function () {
    $("#upload-btn-click").click(function () {
        $("#upload-input-file").click()
    })
}

Index.prototype.run = function () {
    this.HoldbackBorwser()
    this.MonitorDrop()
    this.UploadClick()
}

$(function () {
    let index = new Index()
    index.run()
})