如何在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);});