尝试在点击时加载外部插件无效

Question

What I want to achieve is that, when I click on a button, an overlay div containing the Dropzone.js form is created and displayed. 我想要实现的是，当我单击按钮时，将创建并显示一个包含Dropzone.js表单的覆盖div。

Here's the "normal" script I used before, and everything works fine. 这是我之前使用的“普通”脚本，一切正常。

 <!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>

Here's the script that doesn't work: 这是无效的脚本：

 $(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>

As you can see, the div is created and the Dropzone.js files are loaded, but the Dropzone form doesn't work as in the previous snippet. 如您所见，已经创建了div并加载了Dropzone.js文件，但是Dropzone表单无法像上一个代码片段那样工作。

Where am I wrong? 我哪里错了？

Answer 1

You had a syntax error, 您遇到语法错误，

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>

尝试在点击时加载外部插件无效

问题描述

1 个解决方案

解决方案1
1 2018-08-21 14:38:43

尝试在点击时加载外部插件无效

问题描述

1 个解决方案

解决方案1 1 2018-08-21 14:38:43

解决方案1
1 2018-08-21 14:38:43