本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下:
说明:后台用的python的瓶框架,后台对你理解这篇文章没什么影响,你可以使用php
<强>形式作为上传区
引入Dropzone.js和dropzone.css然后使用表单形式定义一个类=癲ropzone”即可完成
效果
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>瓶上传与Dropzone example
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/{{url_for(“静态”,文件名=dropzone.css)}}“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”type=" text/css "/比;
& lt;脚本src=" https://www.yisu.com/zixun/{{url_for(“静态”,文件名=jquery.js)}}“祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/{{url_for(“静态”,文件名=dropzone.js)}}“祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癿yId”class=癲ropzone”在点我上传& lt;/div>
& lt;脚本type=" text/javascript祝辞//下面两行是js和jquery的方式实现绑定div的例子,你选择一种即可//var myDropzone=new Dropzone (" # myId ", {url:“{{url_for (upload_file)}} "});
$ (" # myId”)。dropzone ({url:“{{url_for (upload_file)}} "});
& lt;/script>
& lt;/body>
& lt;/html>
之前
效果
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>瓶上传与Dropzone example
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/{{url_for(“静态”,文件名=dropzone.css)}}“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”type=" text/css "/比;
& lt;脚本src=" https://www.yisu.com/zixun/{{url_for(“静态”,文件名=jquery.js)}}“祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/{{url_for(“静态”,文件名=dropzone.js)}}“祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;形式id=" myAwesomeDropzone " action=" {{url_for (upload_file)}}”类=癲ropzone”method=" POST " enctype=岸嗖糠?格式”比;
& lt; div类=盎赝恕北?
& lt;输入name="文件" type="文件"多个/比;
& lt;/div>
& lt;/form>
& lt;脚本type=" text/javascript祝辞//两种配置方式,第一种,表单上传时的配置方式,可以打开形式表单的注释,myAwesomeDropzone是表单的id
Dropzone.options。myAwesomeDropzone={
paramName:“文件”//名称将用于传输文件
maxFilesize: 2//MB
接受:函数(文件,完成){
如果(file.name !=癹ustinbieber.jpg”) {
(“那霸,你不要。”);
其他}{
(完成);
}
}
};
& lt;/script>
& lt;/body>
& lt;/html>
之前
效果
