使用文件重命名选项后如何以编程方式更新 dropzone 预览文件名

Question

我有一个 DropZone 脚本（如下所示），它将上传的图像重命名为具有唯一时间戳的唯一文件夹，以避免重复。当我添加文件时，它会创建唯一目录 (session_id) 并正确上传和重命名图像，但是，DropZone 预览图像仍显示原始文件名，因此删除链接不起作用。如果我刷新页面，缩略图会用新文件名正确标记，并且删除链接有效。如何在初始上传/重命名后更新脚本以执行此操作？

Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
    url: "upload.php",
    addRemoveLinks: true,
    maxFiles: 5,
    acceptedFiles: "image/*",
    // Check for previously uploaded images and display in the dropzone
    init: function() { 
        myDropzone = this;
        $.ajax({
            url: 'upload.php',
            type: 'post',
            data: {request: 2},
            dataType: 'json',
            success: function(response) {
                $.each(response, function(key,value){
                    var mockFile = { name: value.name, size: value.size };
                    myDropzone.emit("addedfile", mockFile);
                    myDropzone.emit("thumbnail", mockFile, value.path);
                    myDropzone.emit("complete", mockFile);
                });
            }
        });
    },
    // Rename uploaded files to unique name
    renameFile: function (file) {
        let newName = new Date().getTime() + '_' + file.name;
        return newName;
    },
    // Remove the uploaded file if the "Remove file" link is pressed
    removedfile: function(file) {
        var name = file.name;        
        $.ajax({
            type: 'post',
            url: 'delete.php',
            data: "id="+name,
            dataType: 'html'
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    },
});

这是 upload.php 文件：

<?php
include $_SERVER['DOCUMENT_ROOT'] . '/inc/config.inc.php';
$upload_folder = "uploads/".session_id();
if(!file_exists($upload_folder)) {
    mkdir($upload_folder);
}
$target_dir = $upload_folder."/";

$request = 1;
if(isset($_POST['request'])){
  $request = $_POST['request'];
}
// Upload file
if($request == 1){
    $target_file = $target_dir . basename($_FILES["file"]["name"]);
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo $target_file;  
    }else{
        echo 0;
    }
    die;
}
// Read files from 
if($request == 2){
    $file_list = array();
  
    // Target directory
    $dir = $target_dir;
    if (is_dir($dir)){
  
      if ($dh = opendir($dir)){
  
        // Read files
        while (($file = readdir($dh)) !== false){
  
          if($file != '' && $file != '.' && $file != '..'){
  
            // File path
            $file_path = $target_dir.$file;
  
            // Check its not folder
            if(!is_dir($file_path)){
  
               $size = filesize($file_path);
  
               $file_list[] = array('name'=>$file,'size'=>$size,'path'=>$file_path);
  
            }
          }
  
        }
        closedir($dh);
      }
    }
  
    echo json_encode($file_list);
    exit;
  }
  ?>

这是delete.php文件：

<?php
include $_SERVER['DOCUMENT_ROOT'] . '/inc/config.inc.php';
$upload_folder = "uploads/".session_id();
$target_dir = $upload_folder."/";

if(isset($_POST['id'])){
  $filename = $_POST['id'];
}
// Delete file
$target_file = $target_dir . $filename;
if (unlink($target_file)) {
    echo $target_file;  
}else{
    echo 0;
}
die;
?>

（注意：session_start() 在包含的配置文件中被调用）

如果这里有任何其他不好的想法，请随时告诉我！ :)

本

Answer 1

所以这个问题的答案已经解决了！以下是应用的修复程序供参考。

1. renameFile: 和 removedfile: 均已根据以下 cmets 进行了更新。

renameFile: 部分中的更改使新生成的文件名可供以后使用 removedfile: Ajax 调用 delete.php 时引用

1. init: > success: 已更新，更改了 mockFile 变量。

这可确保 removefile: 在页面重新加载时仍能正常工作（例如，是否存在表单 POST 和需要更正的错误）现在直接从文件夹位置读取图像。

完整代码更新：

Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
    url: "upload.php",
    dictDefaultMessage: "", // remove default text
    addRemoveLinks: true,
    maxFiles: 5,
    acceptedFiles: "image/*",
    // Check for previously uploaded images and display in the dropzone
    init: function() { 
        myDropzone = this;
        $.ajax({
            url: 'upload.php',
            type: 'post',
            data: {request: 2},
            dataType: 'json',
            success: function(response) {
                $.each(response, function(key,value){
                    var mockFile = { 
                        newName: value.name,
                        name: value.name.substr(value.name.indexOf('_') + 1),
                        size: value.size
                    };
                    myDropzone.emit("addedfile", mockFile);
                    myDropzone.emit("thumbnail", mockFile, value.path);
                    myDropzone.emit("complete", mockFile);
                });
            }
        });
    },
    // Rename uploaded files to unique name
    renameFile: function (file) {
        let newName = new Date().getTime() + '_' + file.name;
        // Add new name to the file object:
        file.newName = newName;
        // As an object is handed over by reference it will persist
        return newName;
    },
    // Remove the uploaded file if the "Remove file" link is pressed
    removedfile: function(file) {
        // Get new name from file object:    
        var newName = file.newName;        
        $.ajax({
            type: 'post',
            url: 'delete.php',
            data: "id="+newName,
            dataType: 'html'
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    },
});

感谢 webdeveloper.com 上的用户“Sempervivum”的修复。