Как сделать только Dropzone.JS Previews Div кликабельна, а не вся форма
Я должен использовать dropzone.форма js, которая отправляет пару входных данных и информацию о загрузке файла на другую страницу.
мой код dropzone выглядит так -->
Dropzone.options.mydropzone = {
maxFiles: 1,
maxFilesize: 10, //mb
acceptedFiles: 'image/*',
addRemoveLinks: true,
autoProcessQueue: false,// used for stopping auto processing uploads
autoDiscover: false,
paramName: 'prod_pic',
previewsContainer: '#dropzonePreview', //used for specifying the previews div
clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box
accept: function(file, done) {
console.log("uploaded");
done();
//used for enabling the submit button if file exist
$( "#submitbtn" ).prop( "disabled", false );
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!Only One image file accepted.");
this.removeFile(file);
});
var myDropzone = this;
$("#submitbtn").on('click',function(e) {
e.preventDefault();
myDropzone.processQueue();
});
this.on("reset", function (file) {
//used for disabling the submit button if no file exist
$( "#submitbtn" ).prop( "disabled", true );
});
}
};
но я хочу сделать только предварительный просмотр контейнера как кликабельным, так и перетаскиванием, которое я установил с помощью previewsContainer: '#dropzonePreview'
, но не вся форма.
Если я использую clickable:false
Я не смогу нажать на previews div, чтобы показать диалоговое окно загрузки файла, а также, Даже если я перетаскиваю n поместите файл в любом месте формы, которую он принимает. Я не хочу, чтобы это произошло, я просто хочу, чтобы контейнер предварительного просмотра был перетаскиванием n drop и кликабельный, но в то же время, если я нажму на Отправить, вся форма должна быть загружена.
Я прочитал этот учебник dropzone объединить нормальную форму с Dropzone но это только половина того, что я на самом деле хочу делать.
есть ли способ достичь всего этого с помощью Dropzone эффективно ?.
3 ответов
Я работал над этим, а также и, наконец, наткнулся на ответ на загрузки страница.
ключ установка clickable:
опция туда, где вы хотите, чтобы ваша активная область Dropzone быть. Используя Ваш пример, если вы хотите, чтобы область предварительного просмотра также была областью перетаскивания/щелчка, установите clickable:'#dropzonePreview',
и это сделает эту область активной. Если вы хотите, чтобы изображение" Drop Files " отображалось там, а также используйте это:
<div id="dropzonePreview" class="dz-default dz-message">
<span>Drop files here to upload</span>
</div>
Это позволяет использовать один Форма Dropzone (таким образом, все поля отправляются как одно), позволяя вам иметь меньшую область, предназначенную для удаления / щелчка.
одно примечание, хотя, не делайте его слишком маленьким, как если бы вы перетащить за пределы области он загружает изображение в браузере вместо страницы.
альтернативно вы можете создать dropzones programmaticaly (даже на non form elements) путем создания экземпляра класса Dropzone http://www.dropzonejs.com/#toc_4
вам нужно добавить ДЗ-кликабельно class к желаемому элементу.
HTML-код
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>Drop files here to upload</span>
</div>
</div>
JavaScript
// Dropzone class:
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});
// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });
Примечание
если вы получаете ошибку консоли говорит:Dropzone already attached
, обязательно добавьте эту строку перед началом нового объекта Dropzone.
Dropzone.autoDiscover = false;
в документации говорится, чтобы установить опцию: "clickable: true", но...
моя проблема заключалась в том, что я добавил видимую разметку в форме загрузки (поле). Если вы хотите, чтобы каждая точка в поле была кликабельной, вы не можете включить любую другую видимую разметку в своем представлении, вам нужно добавить ее в опцию "dictDefaultMessage."