懸浮窗刪除以前的圖像

我需要幫助的回答上一個問題 How to limit the number of dropzone.js files uploaded?懸浮窗刪除以前的圖像

，那裏有一個解決方案中使用

Dropzone.options.myAwesomeDropzone = { 
    accept: function(file, done) { 
    console.log("uploaded"); 
    done(); 
    }, 
    init: function() { 
    this.on("addedfile", function() { 
     if (this.files[1]!=null){ 
     this.removeFile(this.files[0]); 
     } 
    }); 
    } 
};

但作爲一個js numpty，我不知道在哪裏放置這個。我假設我的表單必須具有id myAwesomeDropzone，並且上面的代碼需要插入到dropzone.js文檔中，但是在哪裏？如果您可以提供'之後'和'之前'或請替換答案。

如果有人能給我一些指針，它會很棒。

我的聲望低於50，所以我無法對原始主題發表評論。如果我發佈這個作爲新主題是錯誤的，請管理員不要懲罰我並關閉它，而是移動它或做任何事情來讓人們提供幫助。

乾杯安迪

來源

2014-05-22 Andy Hickey

HTML表單應該像下面。請注意，

類= 「懸浮窗」

和

ID = 「我-懸浮窗」

「我 - 懸浮窗」 ID是很重要的， DropZone將此視爲「myDropzone」（連字符已刪除並顯示）。所以當你在DropZone.options中引用這個ID時，它應該是「myDropzone」。這個非常重要。

<div> 
    <form action="/file-upload" class="dropzone" id="my-dropzone" style="border:2px dotted #337ab7"> 
     <div class="dz-message"> 
     Drag n drop photos here or click to upload. 
     <br /> 
     <span class="note">(The photos are uploaded to twitter only when the tweet is sent.)</span> 
     </div> 
    </form> 
</div>

你應該鏈接的CSS和JS文件在HTML頁面中，像這樣

<script src="./js/dropzone.min.js"></script> 
<link href="./css/dropzone.min.css" rel="stylesheet" type="text/css">

在頁面加載，你應該初始化您的JS代碼的懸浮窗的配置爲你的頁面，如下。我限制dropzone只接受一個文件，其大小不應超過5MB。

self.options.maxFilesize = 5; self.options.maxFiles = 1;

Dropzone.autoDiscover = false; 
Dropzone.options.myDropzone = { 
    init: function() { 
    var self = this; 
    // config 
    self.options.addRemoveLinks = true; 
    self.options.autoProcessQueue = false; 
    self.options.maxFilesize = 5; 
    self.options.maxFiles = 1; 
    self.options.dictFileTooBig = 
     "Twitter do not allow files greater than 5MB."; 
    //New file added 
    self.on("addedfile", function(file) { 
     console.log('new file added ', file.path); 
    }); 
    self.on("maxfilesexceeded", function(file) { 
     alert(
     "Only one photo can be attached with the tweet." 
    ); 
    }); 

    } 
};

現在，當你的頁面加載，你會看到形式&得到拖N的你的DIV拖放功能。

要訪問這些文件，您可以在javascript中的某些按鈕單擊事件中執行下面的操作。

// to get queued files 
var myDropzone = Dropzone.forElement("#my-dropzone"); 
var files = myDropzone.getQueuedFiles();

來源

2015-07-23 22:36:30 cherit

懸浮窗刪除以前的圖像

回答

相關問題