将Dropzone集成到AngularJS页面

时间:2017-10-10 19:58:25

标签: javascript angularjs dropzone.js

我试图将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>

0 个答案:

没有答案