Dropzone上传后删除文件

时间:2016-09-08 21:50:11

标签: php jquery dropzone.js

我正在使用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?

0 个答案:

没有答案
相关问题