如何在yii 2.0框架中使用（多圖像拖放區）此php代碼

Question

如何在Yii 2.0框架中使用此PHP代碼（多圖像拖放區）。 我是Yii的新開發人員謝謝

form.php

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>PHP - Multiple Image upload using dropzone.js</h2>
            <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <div>
                    <h3>Upload Multiple Image By Click On Box</h3>
                </div>
            </form>
        </div>
    </div>
</div>

動作文件

$uploadDir = 'uploads';

if (!empty($_FILES)) {
 $tmpFile = $_FILES['file']['tmp_name'];
 $filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);
}

腳本代碼

 <script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>

Yii文件

form.php

    <?= $form->field($model, 'status')->dropDownList([ '1' => 'Yes', '0' => 'No']) ?>

 <?= $form->field($model, 'images')->fileInput(['maxlength' => true]) ?>

Answer 1

您首先必須以以下形式定義add dropzone：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
  </script>`
 <script src="../../assets/dropzone/js/dropzone.js"></script>
 <link type="text/css" rel="stylesheet"
         href="../../assets/dropzone/css/dropzone.css">

  <div action="" id="dZUpload" class="dropzone" method="post" 
     enctype="multipart/form-data">
  <div class="dz-default dz-message">Drop files here to upload or click</div>
 </div>

之后，為dropzone添加js：

  <scirpt>
  $(document).ready(function () {
    Dropzone.autoDiscover = false;
    var url = "http://locahost/url/createpage";

    console.log(url);
    $('#dZUpload').dropzone({

        url: url,
        addRemoveLinks: true,
        maxFiles: 5,
        autoProcessQueue: false,
        enqueueForUpload: false,
        uploadMultiple: true,
        autoDiscover: false,
        parallelUploads: 5,
        clickable: true,
        maxFilesize: 100,
        acceptedFiles: "image/jpeg,image/png",

        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },

        init: function () {

            var myDropzone = this;

            myDropzone.on("addedfile", function (file) {
              alert("new file added");
            });

            myDropzone.on("maxfilesexceeded", function (file) {
                this.removeFile(file);
            });

            var submitButton = document.querySelector("#submit");

            submitButton.addEventListener("click", function (file) {

                if (myDropzone.getQueuedFiles().length > 0) {

                    var submitfiles = false;

                    if (submitfiles === true) {
                        submitfiles = false;
                        return;
                    }

                    file.preventDefault();

                    var deleted_image_data = document.getElementById('deleteImage').value;
                    myDropzone.on('sending', function (file, xhr, formData) {
                        formData.append('deleted_image_data', deleted_image_data);
                    });

                    myDropzone.processQueue();

                    myDropzone.on("complete", function () {
                        submitfiles = true;
                        $('#submit').trigger('click');
                    });

                }
            });
        }
    });
});</script>