0
Dropzone.js看起來非常難看(任何人都記得SCSI Voodoo?),或者文檔很糟糕:無論是什麼原因,我可以嘗試100種不同的類和參數組合而且還沒有到達任何地方 - 這基本上是我在過去6個小時裏所做的。 :PDropzone.js:無法點擊自定義預覽
我想建立一個自定義的dropzone,因爲我不希望整個窗體都是可點擊的。我已經在這裏呆了兩天,真的很近(我想?)。但是,我現在也很困難:我的自定義放置區域不可點擊。
我已經把這個變成一個小提琴:http://jsfiddle.net/timgavin/Labn3qg4/
<form id="form-post-photo" method="post" enctype="multipart/form-data" role="form" accept-charset="UTF-8">
<div class="dropzone dz-clickable dz-default dz-file-preview" id="previews">
<div class="dz-message">
<h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select
</div>
</div>
<div class="form-group">
<input type="text" name="caption" id="caption" class="form-control" placeholder="Caption (optional)">
</div>
<button type="button" id="btn-clear" class="btn btn-danger">Clear</button>
<button type="submit" id="btn-submit" class="btn btn-default">Upload</button>
</form>
<script>
Dropzone.autoDiscover = false;
Dropzone.options.formPostPhoto = {
url: 'file-upload.php',
paramName: 'photo',
autoProcessQueue: false,
//uploadMultiple: true,
parallelUploads: 4,
maxFiles: 4,
maxFileSize: 1,
acceptedFiles: 'image/*',
previewsContainer: '#previews',
clickable:'.dz-clickable',
init: function() {
var submitButton = document.querySelector("#btn-submit")
var myDropzone = this;
// remove extra images
myDropzone.on('maxfilesexceeded', function(file) {
this.removeFile(file);
});
// tell dropzone to process all queued files.
submitButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// add a remove button to each image
this.on('addedfile', function(file,maxFileSize) {
var removeButton = Dropzone.createElement('<i class="glyphicon glyphicon-trash text-danger"></i>');
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
_this.removeFile(file);
// If you want to the delete the file on the server as well, you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
// show the submit button only when a photo has been added
this.on('addedfile', function() {
$('#btn-submit').removeClass('hide').show();
$('#btn-clear').removeClass('hide').show();
});
this.on('sending', function(file) {
//alert('Sending the file' + file.name)
});
this.on('queuecomplete', function(file) {
alert('All files have been uploaded!')
});
// Setup the observer for the button.
var _this = this;
$('#btn-clear').on('click', function() {
// Using "_this" here, because "this" doesn't point to the dropzone anymore
_this.removeAllFiles();
_this.removeAllFiles(true);
});
}
};
</script>
奇怪,因爲我在我的選項中設置了一個URL。無論如何,你提供的工作。謝謝! – timgavin 2015-01-08 15:11:12