使用Dropzone.js删除服务器上的重命名文件

问题描述：

我想实现Dropzone JS以帮助将文件上传到服务器。我使用的是通用实现悬浮窗上的客户端与我的HTML看起来像这样：使用Dropzone.js删除服务器上的重命名文件

<form id='portfolioupload' action='PortfolioUpload.php' class='dropzone'> 
    <div class='fallback'> 
     <input name='file' type='file' /> 
    </div> 
    </form>

在服务器上，我做了一些检查，并在结束时，我重命名该文件，进入它的移动它最终的地方：

$newname = substr(GetGUID(false), -7) . '.' . $ext; 
move_uploaded_file($_FILES['file']['tmp_name'], PortfolioPath() . $newname)

我传递回使用JSON此信息，所建议的在Dropzone.js- How to delete files from server?：

header_status(200); // output header, error 200 
echo json_encode(array("Filename" => $newname));

的代码示例那里看起来它把它添加到可传递的阵列到服务器进行删除。如此接近，但并不完全符合我的要求。

然后我偶然发现how to upload and delete files from dropzone.js这个问题，并且看到我可以听到removedfile事件。所以，我没有实现的代码如下所示：

Dropzone.options.portfolioupload = { 
    acceptedFiles: '.png, .jpg, .gif', 
    addRemoveLinks: true, 
    maxFiles: 25, 
    maxFilesize: 500000, 
    removedfile: function(file) { 
    alert('Deleting ' + file.name); 
    var name = file; 
    $.ajax({ 
     type: 'POST', 
     url: 'app/assets/PortfolioUpload.php', 
     data: "f=delete&fn="+name, 
     dataType: 'html' 
    }); 

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

请求被成功发送到服务器不同的是，文件名是原来的，而不是服务器的重命名文件名。

今天刷网后，我觉得我无法弄清楚如何将两个物品绑在一起。例如，如果我上传foo.jpg并将其在服务器中重命名为dk03p7b.jpg，如何告诉Dropzone foo.jpg = dk03p7b.jpg，以便当用户单击删除文件时，它也会在服务器中删除？

答

我这个解决我自己，首先，从成功响应服用JSON并将其保存到元素file.previewElement.id这样的：

success: function(file, response) { 
    obj = JSON.parse(response); 
    file.previewElement.id = obj.filename; 
    }

然后做，当我使用该值删除Ajax调用在removedfile事件：

removedfile: function(file) { 
    var name = file.previewElement.id; 
    $.ajax({ 
     type: 'POST', 
     url: 'deletefile.php', 
     data: "fn="+name, 
     dataType: 'html' 
    }); 

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

答

这也为我工作

// "myAwesomeDropzone" is the camelized version of the HTML element's ID 
var myDropzone = new Dropzone("#myAwesomeDropzone", { 
    success: function(file, response) { 
     file.previewElement.id = response.id; 
    } 

}); 
myDropzone.on('removedfile', function(file) { 
    var id = file.previewElement.id; 
    $.ajax({ 
     type: 'POST', 
     url: '<?php echo base_url('seller/deleteImagegalleryById'); ?>', 
     data: {id: id, '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'}, 
     dataType: 'html' 
    }); 
    var _ref; 
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
});

使用Dropzone.js删除服务器上的重命名文件

相关推荐