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

Deleting renamed file on server using Dropzone.js

本文关键字：重命名 文件 服务器 删除 Dropzone js      更新时间：2023-09-26

我正在尝试实现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，这样当用户单击"删除文件"时，它也会在服务器中被删除？

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

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

然后，我在removedfile事件中执行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;
  },

这也适用于我的

 // "myAwesomeDropzone" is the camelized version of the HTML element's ID
var myDropzone = new Dropzone("#myAwesomeDropzone", {
   /*
    * This step isn't required.
    success: function(file, response) {
        file.previewElement.id = response.id;
    }
   */
});
myDropzone.on('removedfile', function(file) {
    var id = jQuery(file.previewElement).find('.dz-filename span').html();
    //  directly access the removing preview element and get image name to delete it from server.
   // 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;
});
相关文章：