拖拽文件到浏览器上传的方法【js插件dropzone.js】
作者:admin 时间:2019-3-18 15:44:54 浏览:一般情况下上传文件是通过点击浏览按钮选择文件再点击上传按钮来实现，通过拖拽文件到浏览器来实现上传的方法，看起来酷酷的感觉。其实只需用到一个js插件，编写代码也不复杂，这个js插件是dropzone.js。
拖拽文件到浏览器上传
实例html代码
<html>
<head>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<script src="dropzone.js"></script>
<link href="dropzone.css" rel="stylesheet" />
<p>把图片拖到下面进行上传</p>
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message">
Drop image here.
</div>
</div>
<script>
$(document).ready(function () {
$("#dZUpload").dropzone({
url: "upload_file.php",
maxFiles: 5,
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
</script>
</body>
</html>
代码使用介绍
1、引用插件
需要调用jquery库文件jquery.min.js，和dropzone插件dropzone.js，此插件文件包含在本文实例源码下载包里。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<script src="dropzone.js"></script>
注意文件路径要正确。
2、html代码
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message">
Drop image here.
</div>
</div>
这里有三个关键词，一个是id名称，另两个是class的名称。其中id名称可以是任意值，但class的名称不能改。
3、jquery实现代码
<script>
$(document).ready(function () {
$("#dZUpload").dropzone({
url: "upload_file.php",
maxFiles: 5,
addRemoveLinks: true,
success: function (file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
</script>
这里#dzUpload要跟上面html的div id名称一致。upload_file.php是后台上传程序文件。
4、注意问题
1)、本实例无需上传按钮，文件拖拽到浏览器后立即自动上传。如需取消自动上传，请看此文《dropzone拖拽文件上传时禁止自动上传的方法》。
2)、不支持中文文件名。
- 站长推荐
