请帮助我我尝试使用dropzone.js创建文件上传，并且我很难找到如何删除上传文件的方法。这是我的代码：
的index.php
<div class="container">
<div class="file_upload">
<form action="file_upload.php" class="dropzone">
<div class="dz-message needsclick">
<strong>Drop files here or click to upload.</strong><br />
</div>
</form>
</div>
文件-upload.php的
include_once("db_connect.php");
if(!empty($_FILES)){
$upload_dir = "uploads/";
$fileName = $_FILES['file']['name'];
$uploaded_file = $upload_dir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$uploaded_file)){
//insert file information into db table
$mysql_insert = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
mysqli_query($conn, $mysql_insert) or die("database error:". mysqli_error($conn));
}
}
如何设置删除按钮并删除上传的文件？
答案 0 :(得分：1)
您可以使用库中的内置功能。</ p>
如果为true，则会添加指向要删除的每个文件预览的链接 取消（如果已经上传）文件。 dictCancelUpload ， dictCancelUploadConfirmation 和 dictRemoveFile 选项用于 措辞。
如果这不为null，则在删除之前将提示用户 文件。
通过这两个属性的组合，您将在构建中删除带有确认消息的链接（ dictRemoveFileConfirmation中指定的），这将从用户界面中删除该文件并将其删除也可以从服务器端发送removedfile事件订阅的AJAX请求。例如：
<强> removedfile
每当从列表中删除文件时调用。你可以听 如果您愿意，请从服务器中删除该文件。
myDropzone.on('removedfile', function (file) {
console.log(file);
/* here do AJAX call to your server ... */
});
/* flag is used for testing purpose - to demostrate success and failuer on server */
var flag = false;
Dropzone.options.myAwesomeDropzone = {
url: '/upload',
addRemoveLinks: true,
dictRemoveFileConfirmation: 'Are you sure that you want to remove this file?',
init: function() {
var dz = this;
dz.on('removedfile', function(file) {
flag = !flag;
console.log('file ' + file.name + ' was removed from front-end ...');
doAjaxCall(flag).then(function() {
console.log('file ' + file.name + ' was removed from back-end ...');
}, function() {
console.log('failed to remove file ' + file.name + ' from back-end ...');
/* this is a way to restore the file on the front-end
if something fails on the back-end */
dz.emit('addedfile', file);
dz.emit('complete', file);
});
});
}
}
function doAjaxCall(flag) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
flag ? resolve() : reject();
}, 1000);
});
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/basic.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>
<p>If you upload two files and try to remove them first will demostrate success on server and the second will demostrate failure on server</p>
<div class="dropzone" id="my-awesome-dropzone"></div><方法2
使用自定义主题。 Dropzonejs允许您拥有完全自定义的布局，并允许您覆盖所有默认事件处理程序 - 然后您可以完全控制dropzone的行为：）
查看that sample。
所以基本上每个dropzone都有以下默认layout：
<div class="dz-preview dz-file-preview">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size" data-dz-size></div>
<img data-dz-thumbnail />
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>
此布局在选项previewTemplate选项中指定。因此，如果要设置自定义删除按钮，则可以在包含属性data-dz-remove的模板中添加元素，例如：
<!-- Following button with use the build-in functionality
since it has the attribute data-dz-remove -->
<div data-dz-remove class="my-remove-button"></div>
但是如果你想要更多控制，例如对服务器进行AJAX调用并成功响应以删除文件，你可以使用自定义previewTemplate再次执行它并自己控制事件：
var flag = false;
var previewTemplate =
'<li class="dz-preview dz-file-preview">' +
'<div class="dz-details">' +
' <div class="dz-filename">' +
' <span data-dz-name></span>' +
' (<span data-dz-size></span>)' +
' <span class="btn-remove">Remove</span>' +
'</div>' +
'</div>' +
'<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>' +
'<div class="dz-error-message"><span data-dz-errormessage></span></div>' +
'</li>';
Dropzone.options.myAwesomeDropzone = {
url: '/upload',
previewTemplate: previewTemplate,
previewsContainer: '#preview-container',
init: function() {
var dz = this;
dz.on('addedfile', function(file){
var btnRemove = file.previewElement.querySelector('.btn-remove');
btnRemove.fileRef = file;
btnRemove.addEventListener('click', function(e){
var button = this;
flag = !flag;
var keyword = flag ? 'succeed' : 'fail';
console.log('Sending ajax call that will ' + keyword);
doAjaxCall(flag).then(function(){
dz.removeFile(button.fileRef);
button.fileRef = null;
console.log('File was removed successfully !');
}, function(){
console.log('File was removal failed !');
});
});
});
}
}
function doAjaxCall(flag) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
flag ? resolve() : reject();
}, 1000);
});
}.btn-remove{
background-color: red;
color: white;
font-weight: bold;
text-align: center;
border-radius: 5px;
padding: 3px;
}
.btn-remove:hover{
cursor: pointer;
}
.dropzone{
height: 70px;
background-color: blue;
color: white;
border-radius: 10px;
}
.dropzone .dz-default.dz-message span{
display: block;
font-size: 18px;
font-weight: bold;
text-align: center;
padding-top: 20px;
}
.dz-preview{
margin-bottom:5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>
<div id="my-awesome-dropzone" class="dropzone"></div>
<ul id="preview-container"></ul>
<div class="my-remove-button"></div>
Javascript
myDropzone.on('complete', function (file) {
/* store reference to the file on upload completed */
file.previewElement.querySelector('.my-remove-button').fileRef = file;
});
document.querySelector('.my-remove-button').onclick = function () {
doAjaxCall().then(function(response){
/* use the previously stored reference to remove the file
if successfully removed the file from server */
if(response.result){
if(this.fileRef){
myDropzone.removeFile(this.fileRef);
this.fileRef = null;
}
}
});
};
答案 1 :(得分：0)
只需将addRemoveLinks设置为true。
//"myDropzone" is the camelized version of the form ID
Dropzone.options.myDropzone = {
addRemoveLinks: true,
};