2015-11-16 28 views
6

dropzone.js'yi (http://www.dropzonejs.com/) kullandım. Resmi silmek için silme butonu eklemeye çalışıyorum. ama ben Uygun şekilde dropzone yapılandırarak değildir düşünüyorum javascript tanımsız hatadropzone eklentisinde removefile seçeneği nasıl eklenir?

<script> 
    Dropzone.options.myDropzone = { 
init: function() { 
addRemoveLinks: true, 
thisDropzone = this; 
$.get('photo-add.php', function(data) { 
$.each(data, function(key,value){ 
var mockFile = { name: value.name, size: value.size }; 
    thisDropzone.options.addedfile.call(thisDropzone, mockFile); 
thisDropzone.options.thumbnail.call(thisDropzone, mockFile,  "upload/"+value.name); 

}); 
}); 

this.on("removedfile", function(file) { 
alert(file.name); 
console.log(file); 
    // Create the remove button 
    var removeButton = Dropzone.createElement("<button>Remove file</button>"); 

//Capture the Dropzone instance as closure. 
    var _this = this; 

// Listen to the click event 
removeButton.addEventListener(); 

    // Add the button to the file preview element. 
    file.previewElement.appendChild(removeButton); 
    }); 
    } 
    }; 
    </script> 

cevap

12

alıyorum.

init: function() { 
addRemoveLinks: true, 

Yukarıdaki kod geçerli değil. Eğer bu

removedfile: function(file) { 
    x = confirm('Do you want to delete?'); 
    if(!x) return false; 
} 

Saplı gibi kullanabilirsiniz dosyayı kaldırma olayı işlemek istiyorsanız başka bu

Dropzone.options.myAwesomeDropzone = { 
    addRemoveLinks: true, 
    init: function() { 

    } 

    ... 

}; 

veya benzeri

Kullanım ayrıca this.addRemoveLinks = true

gibi kullanabilirsiniz sunucu tarafında dosya silme. dropzone başarısı yöntemine

bir dizi örneğin dosya adını itmek:

success:function(file){ 
    file_up_names.push(file.name); 

file_up_names=[]; bundan adını almak ve dosya silinmek üzere php sayfasına geçmek silin. Ayrıca, sunucu tarafında dosya adını değiştirdiyseniz, silinecek dosya adını geri almanız gerektiğini de unutmayın. kodunun altına

+0

Dosyayı silmek için php url bağlantısı nasıl eklenir? –

+0

Tüm kodu bana –

+0

ekleyebildin Merhaba raju hala hatırladım unoFink –

3

Dene:

Dropzone.autoDiscover = false; 
var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list 
var fileList = new Array; 
var i = 0; 
$("#dropzone").dropzone({ 
    addRemoveLinks: true, 
    maxFiles: 10, //change limit as per your requirements 
    dictMaxFilesExceeded: "Maximum upload limit reached", 
    acceptedFiles: acceptedFileTypes, 
    dictInvalidFileType: "upload only JPG/PNG", 
    init: function() { 

     // Hack: Add the dropzone class to the element 
     $(this.element).addClass("dropzone"); 

     this.on("success", function (file, serverFileName) { 
      fileList[i] = { 
       "serverFileName": serverFileName, 
       "fileName": file.name, 
       "fileId": i 
      }; 
      $('.dz-message').show(); 
      i += 1; 
     }); 
     this.on("removedfile", function (file) { 
      var rmvFile = ""; 
      for (var f = 0; f < fileList.length; f++) { 
       if (fileList[f].fileName == file.name) { 
        rmvFile = fileList[f].serverFileName; 
       } 
      } 

      if (rmvFile) { 
       $.ajax({ 
        url: path, //your php file path to remove specified image 
        type: "POST", 
        data: { 
         filenamenew: rmvFile, 
         type: 'delete', 
        }, 
       }); 
      } 
     }); 

    } 
}); 
1

Bu aynı konu geldi. Dhaval'in cevabının yardım edeceğini düşündüm, ama belgelerin daha temiz bir yolunu buldum. dokümanlardan

:

Eğer bazı özel bağlantı, sadece veri DZ- ile Şablonunuzdaki öğeleri ekleyebilirsiniz (addRemoveLinks config yerine inşa ait) bir dosyayı kaldırmak isterseniz özniteliği kaldır. Örnek:

<img src="removebutton.png" alt="Click me to remove the file." 
> data-dz-remove /> 

benim önizleme şablonunda bir düğmeye aynı bu özelliği test edilmiş ve gerektiği gibi işe yaradı.

+0

Daha fazla ayrıntıyı açıklayabilir misiniz? Şablona nasıl eklenir? Şablon HTML mi? – truongnm

0

Sunucu Tarafı

DosyaYükle

kaydet dosya ve eğer veritabanı üzerinde dosya bilgilerini, yankı veritabanı tablosu dosya kimliği veya saklamak için karar verirseniz diskte dosyayı saklamak için karar verirseniz Yalnızca , dosya için yeni adı ekleyiniz.id veya adı ile

RemoveFile

Kaldır dosya üzerinde belirtilen adla POST var $ [ "fid"] _POST veya alındı.

JavaScript JQuery

fileList = new Array(); 
$("#fm-dropzone").dropzone({ 
    url: siteurl, 
    addRemoveLinks: true, 
    dictRemoveFileConfirmation: "Are you sure you want to remove this File?",  
    success: function(file, serverFileName) { 
      fileList[file.name] = {"fid" : serverFileName }; 
      }, 
    removedfile: function(file) { 
      $.post(siteurl + "/removeFile", fid:fileList[file.name].fid}).done(function() { 
        file.previewElement.remove(); 
       }); 
      } 
}); 
1

"Her etkinlikleriniz" gibi: başarı - Hata - gönderme - removedfile veya addedfile vb çıkarma işleminde

http://www.dropzonejs.com/#event-list

init : function() { 
    self.on('Every your events', function (file, response) { 
     this.removeFile(file); 
    } 
} 

Bu fonksiyondan çıkan dosya bunu yapabilir:

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true); 
İlgili konular