javascript - Dropzone 手动删除上传的文件

Question

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

addRemoveLinks: true

但它只会删除预览 Pane 中的文件，而不会删除存储文件的服务器中的文件。有没有办法在 dropzone 中编写手动 ajax 请求以删除 dropzone 中上传的文件？我的 Blade 文件包含 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')}}" width="50px" 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>

Answer 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;        
              }