dropify.js 实现文件预览

目的

• 选择框选中文件后，实现预览按钮小窗口打开图片/pdf文件

js

html添加 预览按钮

<!-- 需要引用dropify.js 以及样式  --> 
<input type="file" class="dropify" data-height="20" name="file"
             id="uploadFile" placeholder="请选择文件">
                 
<!-- 自定义添加预览按钮  --> 
 <a href="#" onclick="previewFile('uploadFile')"
              class="btn btn-rounded btn-light">预览</a>

js 方法

/**
* previewFile(domId) 预览按钮事件,domId为上传文件框的ID 
*/
function previewFile(domId) {
    //获取上传的文件
    let fileObj = $('#' + domId).get(0).files[0];
    if (fileObj === undefined || isNull(fileObj)) {
        //获取默认文件
        let defaultFileUrl = $('#' + domId).attr("data-default-file")
        if (defaultFileUrl !== "" && defaultFileUrl !== undefined) {
            //存在直接预览
            //新窗口打开预览
            window.open(defaultFileUrl, '_blank')
            return;
        }
        //用户未选择文件且无默认文件
        swal('', "请选择文件", "warning");
        return;
    }
    let fileUploadType = fileObj.name.substring(fileObj.name.lastIndexOf(".") + 1);
    if (fileUploadType !== "png" && fileUploadType !== "jpg" && fileUploadType !== "jpeg" && fileUploadType !== "pdf") {
        // 只能上传文件
        // swal('', "仅支持在线预览图片/pdf类型", "warning");
        swal({
            title: "是否下载？",
            text: "当前文件不是图片/pdf类型，不支持在线预览",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#dc3545",
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            closeOnConfirm: false
        }, function () {
            //将文件对象转为预览对象Url
            let url = createObjectURL(fileObj)
            //新窗口打开预览
            window.open(url, '_blank')
            setTimeout(function () {
              swal.close()
            },1000)
        });
        return
    }
    //将文件对象转为预览对象Url
    let url = createObjectURL(fileObj)
    //新窗口打开预览
    window.open(url, '_blank')
}
//(关键转换)将本地上传的文件对象转换为blob+url,，可直接在浏览器新窗口打开预览
function createObjectURL(fileObj) {
    let realUrl=""

    // 针对不同的浏览器
    if (window.createObjcectURL !== undefined) {// basic
        realUrl = window.createOjcectURL(fileObj);
    } else if (window.URL !== undefined) {// mozilla(firefox)
        realUrl = window.URL.createObjectURL(fileObj);
    } else if (window.webkitURL !== undefined) {// webkit or chrome
        realUrl = window.webkitURL.createObjectURL(fileObj);
    }
    return realUrl
}