使用Dropzone.js删除服务器上的重命名文件 [英] Deleting renamed file on server using Dropzone.js

问题描述

我正在尝试实现Dropzone JS，以帮助将文件上传到服务器.我在客户端使用Dropzone的通用实现，而我的html如下所示:

I am trying to implement Dropzone JS to help with uploading files to the server. I'm using a generic implementation of Dropzone on the client side with my html looking like this:

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

在服务器中，我进行了一些检查，最后，我将文件重命名并将其移至最终位置:

In the server, I do some checks and, in the end, I rename the file and move it into it's final place:

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

我按照 Dropzone中的建议，使用json传递了此信息.js-如何从服务器删除文件?:

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

那里的代码示例看起来像将其添加到可以传递到服务器以进行删除的数组中.如此接近，但与我所寻找的不完全一样.

The code sample there looks like it adds it to an array that can be passed to the server for deletion. So close, but not quite what I'm looking for.

然后我偶然发现了一个问题，如何上传和从dropzone.js 中删除文件，然后看到我可以收听 removedfile 事件.所以我像这样实现代码:

I then stumble on the question, how to upload and delete files from dropzone.js, and see that I can listen to the removedfile event. So I implement the code there like so:

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

该请求已成功发送到服务器，但文件名是原始文件名，而不是服务器的重命名文件名.

The request is sent to the server successfully except that the filename is that of the original, not the server's renamed filename.

今天洗完网后，我觉得无法弄清楚如何将这两件物品绑在一起.例如，如果我上载foo.jpg并将其在服务器中重命名为dk03p7b.jpg，我如何告诉Dropzone foo.jpg = dk03p7b.jpg，以便当用户单击删除文件"时，它也已在服务器中删除?/p>

After scouring the net today I feel like I can't figure out how to tie the two items together. For example, if I uploaded foo.jpg and rename it in the server to dk03p7b.jpg, how do I tell Dropzone that foo.jpg = dk03p7b.jpg so that when the user clicks Remove file, it's also removed in the server?

推荐答案

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

I solved this myself by, first, taking the json from the success response and saving it to the element file.previewElement.id like this:

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

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

Then I use that value when doing the delete ajax call in the removedfile event:

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

这篇关于使用Dropzone.js删除服务器上的重命名文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！