如何在使用fileRename选项后以编程方式更新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:都已按照以下评论进行了更新。

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

时引用

2. <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上寻找修复。