如何显示删除按钮并删除上传的文件？

Question

请帮助我，我正在尝试创建文件上传dropzone.js，但我很难找到删除上传文件的方法。这是我的代码：

索引.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>      

文件上传.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));
    }   
}

如何放置删除按钮并删除上传的文件？

Answer 1

方法一

\n\n

您可以使用库中的内置功能。

\n\n

\n
• 添加删除链接选项 - 另请参阅粗体道具
\n

\n\n

\n

如果为 true，这将添加一个链接到每个文件预览以删除或\n 取消（如果已上传）文件。dictCancelUpload 、\n dictCancelUploadConfirmation和dictRemoveFile选项用于\n 措辞。

\n

\n\n

\n
• dictRemoveFileConfirmation选项
\n

\n\n

\n

如果该值不为空，则在删除文件之前将提示用户。\n

\n

\n\n

通过这两个属性的组合，您将拥有带有确认消息（在 中指定 dictRemoveFileConfirmation）的内置删除链接，这将从用户界面中删除文件，并从服务器端删除它，您可以从removedfile事件订阅发送 AJAX 请求。例如：

\n\n

\n

删除的文件

\n\n

每当从列表中删除文件时调用。如果需要，您可以收听此内容并从服务器中删除该文件。

\n

\n\n

myDropzone.on(\'removedfile\', function (file) {\n\n    console.log(file);\n    /* here do AJAX call to your server ... */\n\n});\n

\n\n

\r\n

\r\n

myDropzone.on(\'removedfile\', function (file) {\n\n    console.log(file);\n    /* here do AJAX call to your server ... */\n\n});\n

\r\n

/* flag is used for testing purpose - to demostrate success and failuer on server */\r\nvar flag = false;\r\nDropzone.options.myAwesomeDropzone = {\r\n  url: \'/upload\',\r\n  addRemoveLinks: true,\r\n  dictRemoveFileConfirmation: \'Are you sure that you want to remove this file?\',\r\n  init: function() {\r\n    var dz = this;\r\n    dz.on(\'removedfile\', function(file) {\r\n      flag = !flag;\r\n      console.log(\'file \' + file.name + \' was removed from front-end  ...\');\r\n      doAjaxCall(flag).then(function() {\r\n        console.log(\'file \' + file.name + \' was removed from back-end  ...\');\r\n      }, function() {\r\n        console.log(\'failed to remove file \' + file.name + \' from back-end  ...\');\r\n        /* this is a way to restore the file on the front-end\r\n           if something fails on the back-end */\r\n        dz.emit(\'addedfile\', file);\r\n        dz.emit(\'complete\', file);\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\nfunction doAjaxCall(flag) {\r\n  return new Promise(function(resolve, reject) {\r\n    setTimeout(function() {\r\n      flag ? resolve() : reject();\r\n    }, 1000);\r\n  });\r\n}

\r\n

\r\n

\r\n

\n\n

方法2

\n\n

使用自定义主题。Dropzonejs 允许您拥有完全自定义的布局，并允许您覆盖所有默认事件处理程序 - 然后您可以完全控制 dropzone 的行为:)

\n\n

看看那个样本。

\n\n

所以基本上每个dropzone都有以下默认布局：

\n\n

<div class="dz-preview dz-file-preview">\n  <div class="dz-details">\n    <div class="dz-filename"><span data-dz-name></span></div>\n    <div class="dz-size" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>\n  <div class="dz-success-mark"><span>\xe2\x9c\x94</span></div>\n  <div class="dz-error-mark"><span>\xe2\x9c\x98</span></div>\n  <div class="dz-error-message"><span data-dz-errormessage></span></div>\n</div>\n

\n\n

此布局在选项PreviewTemplate选项中指定。因此，要拥有自定义删除按钮，您可以在包含属性的模板中添加元素data-dz-remove，例如：

\n\n

<!-- Following button with use the build-in functionality \n     since it has the attribute data-dz-remove -->\n<div data-dz-remove class="my-remove-button"></div> \n

\n\n

但如果您想要更多控制，例如对服务器进行 AJAX 调用并成功响应以删除文件，您可以自己使用自定义PreviewTemplate和控制事件再次执行此操作：

\n\n

\r\n

\r\n

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/basic.min.css" />\r\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css" />\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>\r\n\r\n<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>\r\n<div class="dropzone" id="my-awesome-dropzone"></div>

\r\n

<div class="dz-preview dz-file-preview">\n  <div class="dz-details">\n    <div class="dz-filename"><span data-dz-name></span></div>\n    <div class="dz-size" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>\n  <div class="dz-success-mark"><span>\xe2\x9c\x94</span></div>\n  <div class="dz-error-mark"><span>\xe2\x9c\x98</span></div>\n  <div class="dz-error-message"><span data-dz-errormessage></span></div>\n</div>\n

\r\n

<!-- Following button with use the build-in functionality \n     since it has the attribute data-dz-remove -->\n<div data-dz-remove class="my-remove-button"></div> \n

\r\n

\r\n

\r\n

\n\n

<div class="my-remove-button"></div> \n

\n\n

JavaScript

\n\n

myDropzone.on(\'complete\', function (file) {\n    /* store reference to the file on upload completed */\n    file.previewElement.querySelector(\'.my-remove-button\').fileRef = file;\n});\n\ndocument.querySelector(\'.my-remove-button\').onclick = function () {\n    doAjaxCall().then(function(response){\n        /* use the previously stored reference to remove the file \n           if successfully removed the file from server */\n        if(response.result){\n            if(this.fileRef){\n                myDropzone.removeFile(this.fileRef);\n                this.fileRef = null;                 \n            }\n        }\n    });\n\n};\n

\n