|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
拖拽文件到瀏覽器上傳的方法【js插件dropzone.js】
作者:admin 時間:2019-3-18 15:44:54 瀏覽:一般情況下上傳文件是通過點(diǎn)擊瀏覽按鈕選擇文件再點(diǎn)擊上傳按鈕來實(shí)現(xiàn)，通過拖拽文件到瀏覽器來實(shí)現(xiàn)上傳的方法，看起來酷酷的感覺。其實(shí)只需用到一個js插件，編寫代碼也不復(fù)雜，這個js插件是dropzone.js。
拖拽文件到瀏覽器上傳
實(shí)例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>把圖片拖到下面進(jìn)行上傳</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、引用插件
需要調(diào)用jquery庫文件jquery.min.js，和dropzone插件dropzone.js，此插件文件包含在本文實(shí)例源碼下載包里。
<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>
這里有三個關(guān)鍵詞，一個是id名稱，另兩個是class的名稱。其中id名稱可以是任意值，但class的名稱不能改。
3、jquery實(shí)現(xiàn)代碼
<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)、本實(shí)例無需上傳按鈕，文件拖拽到瀏覽器后立即自動上傳。如需取消自動上傳，請看此文《dropzone拖拽文件上傳時禁止自動上傳的方法》。
2)、不支持中文文件名。
- 站長推薦
