/ / Fortschrittsbalken kommen nicht in dropzone - jquery, dropzone.js

Fortschrittsbalken kommen nicht in dropzone - jquery, dropzone.js

Ich habe Dropzone für das Hochladen mehrerer Dateien verwendet. Hier habe ich ein seltsames Problem. Ich gebe meinen Code unten.

<script type="text/javascript" src="<?php echo $this->webroot?>js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="<?php echo $this->webroot?>css/popup_style.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo $this->webroot;?>css/dropzone.css" />

<script src="<?php echo $this->webroot;?>js/dropzone.min.js"></script>
<script type="text/javascript">
jQuery(function($){

try {
jQuery(".dropzone").dropzone({
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 10, // MB
maxFiles: 6,
//autoProcessQueue: true,
addRemoveLinks : true,
acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
dictDefaultMessage :
"<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to upload 
<span class="smaller-80 grey">(or click)</span> <br /> 
<i class="upload-icon icon-cloud-upload blue icon-3x"></i>",
dictResponseError: "Error while uploading file!",

//change the previewTemplate to use Bootstrap progress bars
previewTemplate: "<div class="dz-preview dz-file-preview">n  <div class="dz-details">n    <div class="dz-filename"><span data-dz-name></span></div>n    <div class="dz-size" data-dz-size></div>n    <img data-dz-thumbnail />n  </div>n  <div class="progress progress-small progress-success progress-striped active"><span class="bar" data-dz-uploadprogress></span></div>n  <div class="dz-success-mark"><span></span></div>n  <div class="dz-error-mark"><span></span></div>n  <div class="dz-error-message"><span data-dz-errormessage></span></div>n</div>"
});
} catch(e) {
alert("Dropzone.js does not support older browsers!");
}

});
</script>
<body style="margin:0px;">
<div class="popup">
<div class="popHead">
<!--<a href="#" class="popCross"></a>-->
<div class="clear"></div>
</div>
<div class="popBody">
<div id="dropzone">
<form action="<?php echo $this->webroot;?>manage/multiple_latest_experience_upload" class="dropzone">
<div class="fallback">
<input name="photo" id="photo" type="file" multiple="" />
</div>
</form>
</div>

</div>
</div>
</body>

Jetzt ist das Problem, dass, wenn ich benutze,

<script type="text/javascript" src="/images/<?php echo $this->webroot?>js/jquery-1.7.2.min.js"></script>

dann die Eigenschaften "maxFiles" , "akzeptierte Dateien" funktioniert einwandfrei, aber die Fortschrittsleiste kommt nicht.

Wenn ich das entferne,

<script type="text/javascript" src="<?php echo $this->webroot?>js/jquery-1.7.2.min.js"></script>

js bibliothek dann die eigenschaften "maxFiles" , "akzeptierte Dateien" nicht woking, aber progressbar kommt. Und wenn diese Seite in eine Fancybox geladen wird, erscheint ein Javascript-Fehler "Fehler: Dropzone bereits angehängt". Ich verstehe nicht, wie ich dieses Problem beheben kann. Jede Hilfe wäre dankbar. Vielen Dank im Voraus.

Antworten:

0 für die Antwort № 1

Probieren Sie den Code aus:

var myDropzone = new Dropzone("your selector",{
// you options.
});

-1 für die Antwort № 2

Ich vermute, dass Sie eine Version von verwenden Jquery das ist zu alt. Versuchen Sie 1.10.2