javascript - 尝试在单击时加载外部插件不起作用
问题描述
我想要实现的是,当我单击一个按钮时,会创建并显示一个包含Dropzone.js表单的覆盖 div。
这是我之前使用的“正常”脚本,一切正常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
</head>
<body>
<h1>Upload your files</h1>
<form action="uploads" method="post" enctype="multipart/form-data" class="dropzone" id="my-dropzone">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script>
Dropzone.options.myDropzone = {
paramName: 'file',
maxFilesize: 1, // MB
maxFiles: 1,
acceptedFiles: ".jpg",
dictDefaultMessage: "Either drag your files or click",
addRemoveLinks: true
};
</script>
</body>
</html>
这是不起作用的脚本:
$(document).ready(function () {
/**
* Promises to load the Dropzone.js files on CDNs
*/
function myAsyncFunction(type, url) {
return new Promise(function (resolve, reject) {
if (type === "js") {
var script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
} else if (type === "css") {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
link.onload = resolve;
link.onerror = reject;
document.head.appendChild(link);
}
})
}
/**
* Overlay div
*/
var uploadDiv = function (__callback) {
var div = document.createElement('div');
div.setAttribute('id', 'dropzone-container');
document.body.appendChild(div);
var h1 = document.createElement('h1');
h1.textContent = "Upload file";
div.appendChild(h1);
var form = document.createElement('form');
form.setAttribute('action', 'uploads');
form.setAttribute('method', 'post');
form.setAttribute('enctype', 'multipart/form-data');
form.setAttribute('class', 'dropzone');
form.setAttribute('id', 'my-dropzone');
div.appendChild(form);
__callback();
};
/**
* Does the job and call the Dropzone object
*/
var upload = function () {
// Get data-options
var options = JSON.parse(this.dataset.options);
// Create HTML
uploadDiv(function () {
myAsyncFunction('css', '//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css')
.then(
myAsyncFunction('js', '//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js')
.then(
Dropzone.options.myDropzone = {
paramName: 'file',
maxFilesize: options.maxFilesize, // MB
maxFiles: options.maxFiles,
acceptedFiles: options.acceptedFiles,
dictDefaultMessage: "Either drag your files or click",
addRemoveLinks: true
}
)
)
});
}
/**
* Attach EventListener.
* @type {HTMLCollectionOf<Element>}
*/
var btnUpload = document.getElementsByClassName('mb-upload');
for (var i=0; i<btnUpload.length; i++) {
btnUpload[i].addEventListener("click", upload);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<input type="button" class="form-control btn btn-warning mb-upload" data-options='{"maxFilesize":1,"maxFiles":1,"acceptedFiles":".jpeg,.jpg,.png,.gif"}' id="author_avatar" value="Upload...">
</body>
</html>
如您所见,创建了 div 并加载了 Dropzone.js 文件,但 Dropzone 表单不像前面的代码片段那样工作。
我哪里错了?
解决方案
你有一个语法错误,
myAsyncFunction('js', '//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js').then(()=>{
//resolve function
})
$(document).ready(function () {
/**
* Promises to load the Dropzone.js files on CDNs
*/
function myAsyncFunction(type, url) {
return new Promise(function (resolve, reject) {
if (type === "js") {
var script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
} else if (type === "css") {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
link.onload = resolve;
link.onerror = reject;
document.head.appendChild(link);
}
})
}
/**
* Overlay div
*/
var uploadDiv = function (__callback) {
var div = document.createElement('div');
div.setAttribute('id', 'dropzone-container');
document.body.appendChild(div);
var h1 = document.createElement('h1');
h1.textContent = "Upload file";
div.appendChild(h1);
var form = document.createElement('form');
form.setAttribute('action', 'uploads');
form.setAttribute('method', 'post');
form.setAttribute('enctype', 'multipart/form-data');
form.setAttribute('class', 'dropzone');
form.setAttribute('id', 'my-dropzone');
div.appendChild(form);
__callback();
};
/**
* Does the job and call the Dropzone object
*/
var upload = function () {
// Get data-options
var options = JSON.parse(this.dataset.options);
// Create HTML
uploadDiv(function () {
myAsyncFunction('css', '//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css')
.then(
myAsyncFunction('js', '//cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js')
.then(()=>{
Dropzone.options.myDropzone = {
paramName: 'file',
maxFilesize: options.maxFilesize, // MB
maxFiles: options.maxFiles,
acceptedFiles: options.acceptedFiles,
dictDefaultMessage: "Either drag your files or click",
addRemoveLinks: true
}
})
)
});
}
/**
* Attach EventListener.
* @type {HTMLCollectionOf<Element>}
*/
var btnUpload = document.getElementsByClassName('mb-upload');
for (var i=0; i<btnUpload.length; i++) {
btnUpload[i].addEventListener("click", upload);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<input type="button" class="form-control btn btn-warning mb-upload" data-options='{"maxFilesize":1,"maxFiles":1,"acceptedFiles":".jpeg,.jpg,.png,.gif"}' id="author_avatar" value="Upload...">
</body>
</html>
推荐阅读
- javascript - 使用 angular 使用动态输入从 firestore 查询实时数据
- c++ - UnicodeString 用另一个子字符串替换一个子字符串
- ios - 如何知道 SKProductDiscount 何时有效
- r - 绘制给定累积分布函数的离散密度
- azure - 停用特定资源的 Azure 安全策略
- python - 如何在 python 中以 pdf 格式下载数据表,同时保持所需的格式?
- java - 使用密钥库 api 的内存密钥库“无法找到到所请求目标的有效证书路径”
- sql - SQL 将表列用于 IN 子句
- php - 创建图像时如何解决“ColorspaceColorProfileMismatch 'icc'”冲突?
- xml - 使用 XML 内容作为请求正文时,如何防止 REST Assured POST 请求丢弃 XML 声明标记?