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
}
