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

Question

我正在尝试实现Dropzone JS以帮助将文件上传到服务器.我在客户端使用Dropzone的通用实现,我的html看起来像这样:

  <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中所述 - 如何从服务器中删除文件？:

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

那里的代码示例看起来像是将它添加到一个可以传递给服务器进行删除的数组中.如此接近,但不是我想要的.

然后我偶然发现了一个问题,如何从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这样当用户点击删除文件时,它也会在服务器中删除？

Answer 1

我自己解决了这个问题,首先,从成功响应中获取json并将其保存到元素file.previewElement.id中,如下所示:

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

然后我在removefile事件中执行delete ajax调用时使用该值:

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