php - 如何在 dropzone 上传后立即更新文件名？

Question

我使用 dropzone.js 上传多个文件。上传后，我会从 php 文件获得响应，并且必须更新 dropzone 中的文件名，以便可以立即删除该文件。除此之外，我需要刷新页面并删除图像。

如何实现？

这是我的代码。我正在使用 dropzone.js 插件添加多个文件上传

php文件

  if (!empty($_FILES)) {
        $tempFile = $_FILES['file']['tmp_name'];
        $fileName = $_FILES['file']['name'];
        $targetPath = APPPATH . 'uploads/work_picture/';
        $targetFile = $targetPath . time().$fileName ;
        move_uploaded_file($tempFile, $targetFile);
        // if you want to save in db,where here
        // with out model just for example
        // $this->load->database(); // load database
             $this->db->insert('tablename',array('business_id'=>$business_id->id,'picture_name' => time().$fileName));
         header('Content-type: text/json');              //3
        header('Content-type: application/json');
         echo json_encode(array("name"=>time().$fileName));

         exit;
        }






  <form action="<?php echo site_url('settings_pro/work_picture_upload'); ?>" class="dropzone dz-clickable" id="my-awesome-dropzone"><div class="dz-default dz-message"><span>Drop Files Here or Click to Upload...</span></div></form>      

Dropzone.options.myAwesomeDropzone = {
addRemoveLinks: true ,
 maxFiles: 5,
 acceptedFiles: 'image/*',
 url: "<?php echo site_url('settings_pro/work_picture_upload'); ?>", 



    init: function() {
        thisDropzone = this;



        this.on("maxfilesexceeded", function(file){
    alert("No more files please!");
     this.removeFile(file);
     this.addFile(file);
});

        this.on('removedfile', function(file) {
                console.log(file);
                var file_name = file.name;
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url('settings_pro/delete_image'); ?>',
                    data: { 'filename': file_name },
                    success: function(report) {
                        console.log(report);
                    },
                    error: function(report) {
                        console.log(report);
                    }
                });
            });





        $.get('<?php echo base_url('settings_pro/get_picture'); ?>', function(data) {
            $.each(data, function(key,value){
                //alert(data);
            //var mockFile = { name: value.name, size: value.size };
            var mockFile = { name: value.name};
            thisDropzone.options.addedfile.call(thisDropzone, mockFile);
            thisDropzone.options.thumbnail.call(thisDropzone, mockFile, 
            value.path);
            });
        });

         this.on("successmultiple", function(files, response) {

             alert("hi");
        // event when files are successfully uploaded
        // you can return a response string and process it here through 'response'
    });


    this.on("success", function(file, response) {


    file.serverId = response; 
        //$('#dz-preview').html('<img src="" width="200" height="200" alt="<?php //echo $empNameFull; ?>">');

//  location.reload();


   });

Answer 1

您可以尝试使用代码可能会有所帮助。

 Dropzone.options.myAwesomeDropzone = {
      init: function(){
          var th = this;
          this.on('queuecomplete', function(){
              ImageUpload.loadImage();  // CALL IMAGE LOADING HERE
              setTimeout(function(){
                  th.removeAllFiles();
              },5000);
          })
      },
      paramName: "file", // The name that will be used to transfer the file
      maxFilesize: 2, // MB       
      acceptedFiles: 'image/*',

    };

my.on("complete", function(file) { my.removeFile(file); });
my.on("complete", function(file) { my.removeAllFiles(file);});