Dropzone 手动删除上传的文件

Posted 2023-05-08

【中文标题】Dropzone 手动删除上传的文件

【英文标题】：Dropzone removing uploaded file manually

【发布时间】：2020-01-14 06:35:23

【问题描述】：

我正在构建一个使用dropzone 上传文件的表单。 我可以轻松上传文件。 我还添加了一个使用 , 删除上传文件的选项，

addRemoveLinks: true

但它只删除预览窗格中的文件，而不是存储文件的服务器中的文件。有没有办法在 dropzone 中编写手动 ajax 请求以删除 dropzone 中的上传文件？ 我的刀片文件包含 dropzone。

<div class="col-md-3 text-center">
                <label class="checkbox-inline"><input type="checkbox" name = "RC" id = "RC" value="RC">RC</label>
                <div class="dropzone" id="dropzoneFileUpload">
                  <label for="file" class="control-label text-center">Choose a file</label>
                  <span class="control-fileupload">   
                    <img src="URL::asset('/images/image_upload.svg')"  class="upload-icon">
                  </span>
                </div>
                <div class="deleteRC" id = "deleteRC">
                  <button type ="button" class="btn btn-danger" style="cursor:'pointer';" onclick = "Deleteimg();" data-toggle="tooltip" data-placement="top" title="Delete"><span class="glyphicon glyphicon-trash"></span></button>
                </div>
              </div>

<script type="text/javascript">
var baseUrl = " url('/') ";
        var token = " csrf_token() ";
        var documentType = $("#RC").val();
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("div#dropzoneFileUpload", 
            url: baseUrl + "/dropzone/uploadImage",
            addRemoveLinks: true,
            params: 
                _token: token,
                documentType: documentType
            ,
            success:function(file, response)
            
              doctype = doctype.concat(response['documentType']);
              $("#documentType").val(doctype);
              doc = doc.concat(response['doc']);
              $("#document").val(doc);
              alert("Upload completed");
              //document.getElementById("deleteRC").style.display = "block";
            ,
            error: function (file, response) 
            file.previewElement.classList.add("dz-error");
            alert('File name already exists');
        
        );
</script>

【参考方案1】：

您可以使用 removedfile 选项，从列表中删除文件后可以调用该选项

addRemoveLinks: true,
removedfile: function(file) 
    var name = file.name;        
    $.ajax(
        type: 'POST',
        url: 'url.php',
        data: "id="+name,
        dataType: 'html'
    );
var _del;
return (_del= file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;