我正在使用dropzone允许用户上传最多3张图片。一切正常,但我想从服务器中删除图像。页面最初加载时工作正常。我检查服务器以查看是否存在3个文件中的任何一个,并在dropzone区域中加载它们的服务器名称。
var fs1 = <?php echo $filesize1; ?>;
if(fs1 != 0)
{
var mockFile1 = { name: "<?php echo $id; ?>-1.<?php echo $ext1; ?>", size: <?php echo $filesize1; ?> };
myDropzone.emit("addedfile", mockFile1);
myDropzone.emit("thumbnail", mockFile1, "/logos/<?php echo $id; ?>-1.<?php echo $ext1; ?>");
myDropzone.emit("complete", mockFile1);
file_up_names[0] = "<?php echo $id; ?>-1.<?php echo $ext1; ?>";
}
var fs2 = <?php echo $filesize2; ?>;
if(fs2 != 0)
{
var mockFile2 = { name: "<?php echo $id; ?>-2.<?php echo $ext2; ?>", size: <?php echo $filesize2; ?> };
myDropzone.emit("addedfile", mockFile2);
myDropzone.emit("thumbnail", mockFile2, "/logos/<?php echo $id; ?>-2.<?php echo $ext2; ?>");
myDropzone.emit("complete", mockFile2);
file_up_names[1] = "<?php echo $id; ?>-2.<?php echo $ext1; ?>";
}
var fs3 = <?php echo $filesize3; ?>;
if(fs3 != 0)
{
var mockFile3 = { name: "<?php echo $id; ?>-3.<?php echo $ext3; ?>", size: <?php echo $filesize3; ?> };
myDropzone.emit("addedfile", mockFile3);
myDropzone.emit("thumbnail", mockFile3, "/logos/<?php echo $id; ?>-3.<?php echo $ext3; ?>");
myDropzone.emit("complete", mockFile3);
file_up_names[2] = "<?php echo $id; ?>-3.<?php echo $ext1; ?>";
}
myDropzone.options.maxFiles = myDropzone.options.maxFiles - <?php echo $num_images; ?>;
当我上传图片时,我检查服务器并使用AJAX将其保存到服务器。 JSON返回文件映像名称和大小。我将图像上传到uniqueID-1.jpg或uniqueID-2.jpg或uniqueID-3.jpg时重命名该图像,具体取决于之前上传的图像。因此,如果只上传了一个图像,则下一个图像将被重命名为uniqueID-2.jpg,依此类推。
注意:fs1,fs2和fs3是js变量,设置为页面加载时已上传的图像的文件大小。
到目前为止,这是我的完整代码:
Dropzone.autoDiscover = false;
var file_up_names = new Array;
var myDropzone = new Dropzone("#my-awesome-dropzone", { // Make the #my-awesome-dropzone a dropzone
url: "new-logo.php",
paramName: "file", // The name that will be used to transfer the file
maxFiles: 3,
maxFilesize: 1,
addRemoveLinks: true,
acceptedFiles: 'image/jpeg, image/jpg, image/png',
thumbnailWidth: 260,
thumbnailHeight: 120,
dictRemoveFile: 'Remove Logo',
accept: function(file, done) {
console.log("Uploaded");
done();
},
success: function( file, response ){
var obj = JSON.parse(response);
console.log(obj.filename + " " + obj.filesize);
var fn = obj.filename;
var fnsize = obj.filesize;
file_up_names.push(obj.filename);
$(file.previewElement).find('[data-dz-name]').html(fn);
myDropzone.emit("thumbnail", file, "logos/" + fn);
},
removedfile: function(file) {
x = confirm('Do you want to delete this logo?');
if(!x) return false;
for(var i = 0; i < file_up_names.length; ++i)
{
alert(file_up_names[i] + " " + file.name);
if(file_up_names[i] == file.name)
{
$.ajax({
type: 'POST',
url: 'delete-logo.php',
data: "file_name="+file_up_names[i],
dataType: 'html'
});
myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
}
}
});
所以这是我似乎无法解决的问题。
假设我上传了一张名为test.jpg的图片,并将其重命名为15-2.jpg。这个名称存储在文件名数组中没问题。但是当我单击Remove Logo链接时,我会从数组file_up_names和file.name属性值中提醒文件名以进行测试。
file.name仍显示为test.jpg,因此它永远不会匹配file_up_names数组中的15-2.jpg。
成功是更改文件名但这不是全局设置的,因此removedfile无法从服务器中看到更新的文件名。
如何将file.name设置为15-2.jpg(即JSON成功返回的服务文件名)而不是test.jpg?