我试图将Dropzone集成到AngularJS页面中,但我没有太多运气。我能够让Dropzone代码单独在页面中工作,但是当我使用AngularJS代码将其放入文件时,它无法正常工作。我需要Dropzone与其他表单元素(即文本字段,文本区域,组合框等)一起使用,而不仅仅是单独使用。这是我的代码:
<div ng-show="error" class="alert alert-danger">{{error}}</div>
<div ng-if="CustomerID > 0">
<form name="crForm" action="php/process_cr_form.php" enctype="multipart/form-data" ng-submit="login()" role="form">
<!-- <form name="form" ng-submit="login()" role="form"> -->
<div class="form-group">
<label for="summary">Summary/Title of the Request</label>
<input type="text" name="summary" id="summary" class="form-control" ng-model="summary" required />
<span ng-show="form.summary.$dirty && form.summary.$error.required" class="help-block">Summary/Title is required</span>
</div>
<div class="form-group">
<label for="description">Description of the Request</label>
<textarea name="description" id="description" class="form-control" ng-model="description" required></textarea>
<span ng-show="form.description.$dirty && form.description.$error.required" class="help-block">Description is required</span>
</div>
<div class="dropzone" id="my-awesome-dropzone"><span>Drop files here to upload</span></div>
<div class="form-actions">
<button id="submit" type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Submit</button>
</div>
</form>
</div>
<div ng-if="!CustomerID > 0">
<a href="#/login">Logout</a>
</div>
<script>
Dropzone.options.myAwesomeDropzone = {
paramName: "files", // The name that will be used to transfer the file
maxFilesize: 5, // MB
parallelUploads: 25,
maxFiles: 25,
autoProcessQueue: false,
uploadMultiple: true,
acceptedFiles: 'image/*,.xls,.xlsx,.doc,.docx,.pdf',
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
document.getElementById('submit').addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
this.on("addedfile", function() {
});
this.on("complete", function(file) {
myDropzone.removeFile(file);
});
}
};
</script>