删除文件时在 dropzonejs 中遇到问题

Question

我正在使用以下代码来使用 dropzonejs：

$(".dropzone").dropzone({ 
        url: "/ehr/postEHRFile" , 
        addRemoveLinks: "dictRemoveFile" ,
        maxFilesize: 5,
        maxFiles: 5,
        dictDefaultMessage: '<i class="fa fa-cloud-upload"></i> \
         <span class="main-text"><img src="<?php echo URL."public/images/cloud.png"; ?>" style="width:70px;opacity:0.5;"> <br /> \
         <span class="main-text"><b>Drop Files</b> to upload</span> <br /> \
         <span class="sub-text">(or click)</span> \
        ',
        dictResponseError: 'Server not Configured',
        clickable: true,
        headers: { "userid" : "<?php echo $this->user['id']; ?>" }  ,
        success: function (response) {
            var x = JSON.parse(response.xhr.responseText);
            if(x.error){
                alert(x.message);
                this.removeAllFiles();
            }else{
                if($("input[name='ehr_files']").val() == ''){
                    $("input[name='ehr_files']").val(x.path+':'+x.ftype+':'+x.fname);
                }else{
                    $("input[name='ehr_files']").val($("input[name='ehr_files']").val()+','+x.path+':'+x.ftype+':'+x.fname);
                }
            }
        },
        removedfile: function(file) {
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        }
    });

在 success 中，我将文件详细信息分配到隐藏字段中，例如 ImagePath:ImageType:ImageName,ImagePath:ImageType:ImageName....... 等等。

我这样做是为了将所有文件详细信息保存在隐藏字段中（可能是多个文件，因此使用逗号分隔），稍后将使用这些信息保存到数据库中。

当用户从 dropzonejs 面板中删除文件时，我还需要从隐藏字段中删除它的详细信息，这样它就不会保存在数据库中。

问题：

1) 我可以使用 file.name 获取该文件，我可以从隐藏字段中删除记录，但文件名可能不是唯一的。

2) 我也无法在成功函数中访问 file 对象。如果可能的话，我会添加一个唯一的 id 来识别。

3) 能得到文件索引就可以删除，也就是第2号文件或第3号文件，但不知道如何得到索引

Answer 1

经过几个小时的搜索并尝试了不同的概念后，我终于解决了我的问题。所以分享我更新的代码。

Dropzone.autoDiscover = false;
    var file_detail = '';
    var file_detail_arr = '';
    $(".dropzone").dropzone({ 
        url: "/ehr/postEHRFile" , 
        addRemoveLinks: "dictRemoveFile" ,
        maxFilesize: 5,
        maxFiles: 5,
        dictDefaultMessage: '<i class="fa fa-cloud-upload"></i> \
         <span class="main-text"><img src="<?php echo URL."public/images/cloud.png"; ?>" style="width:70px;opacity:0.5;"> <br /> \
         <span class="main-text"><b>Drop Files</b> to upload</span> <br /> \
         <span class="sub-text">(or click)</span> \
        ',
        dictResponseError: 'Server not Configured',
        clickable: true,
        headers: { "userid" : "<?php echo $this->user['id']; ?>" }  ,
        success: function (response) {

            var x = JSON.parse(response.xhr.responseText);
            if(x.error){
                alert(x.message);
                this.removeAllFiles();
            }else{
                if($("input[name='ehr_files']").val() == ''){
                    $("input[name='ehr_files']").val(x.path+':'+x.ftype+':'+x.fname);
                }else{
                    $("input[name='ehr_files']").val($("input[name='ehr_files']").val()+','+x.path+':'+x.ftype+':'+x.fname);
                }
                this.on("complete", function(file) {
                 file.id = x.path;

                });
            }
        },
        removedfile: function(file) {
            var _ref;
            var file_del_path = file.id;

            var file_str = $("input[name='ehr_files']").val();
            var file_arr =  file_str.split(',');

            for(var key in file_arr){

               file_detail = file_arr[key];
                file_detail_arr = file_detail.split(':');

                if(file_detail_arr[0] == file_del_path){
                    file_arr.splice(key, 1);
                    $("input[name='ehr_files']").val(file_arr.join(','));
                }
            }

            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

        }
    });

删除文件时在 dropzonejs 中遇到问题

Facing issue in dropzonejs when deleting a file

javascript

dropzone.js