Javascript 如何在yii 2.0框架中使用（多图像拖放区）这段php代码

如何在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>

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

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

脚本代码

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

Dropzone.options.imageUpload={
最大文件大小：1，
接受的文件：“.jpeg、.jpg、.png、.gif”
};

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>

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

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

---

您首先必须在表单中定义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>

$（文档）.ready（函数（）{
Dropzone.autoDiscover=false；
变量url=”http://locahost/url/createpage";
console.log（url）；
$（'#dZUpload'）.dropzone({
url:url，
addRemoveLinks：是的，
最大文件数：5，
自动处理队列：false，
enqueueForUpload:false，
uploadMultiple:true，
自动发现：错误，
并行上传：5，
可点击：正确，
最大文件大小：100，
acceptedFiles:“图像/jpeg，图像/png”，
成功：函数（文件、响应）{
var imgName=响应；
file.previewElement.classList.add（“dz成功”）；
console.log（“成功上传：+imgName”）；
},
init：函数（）{
var myDropzone=this；
myDropzone.on（“addedfile”，函数（文件）{
警报（“新增文件”）；
});
myDropzone.on（“MaxFilesExcepended”，函数（文件）{
此.removeFile（文件）；
});
var submitButton=document.querySelector（“提交”）；
submitButton.addEventListener（“单击”），函数（文件）{
如果（myDropzone.getQueuedFiles（）.length>0）{
var submitfiles=false；
if（submitfiles===true）{
submitfiles=false；
返回；
}
preventDefault（）文件；
var deleted_image_data=document.getElementById（'deleteImage'）。值；
myDropzone.on（'sending'，函数（文件、xhr、formData）{
formData.append（'deleted\u image\u data'，deleted\u image\u data'）；
});
myDropzone.processQueue（）；
myDropzone.on（“完成”，函数（）{
submitfiles=true；
$（“#提交”）.trigger（'click'）；
});
}
});
}
});
});

您能否将提交按钮id设置为

submit

我必须这样设置，但当我单击提交按钮时，它无法工作

，然后在控制台中显示此错误

导航到http://localhost:8081/traveling/backend/web/index.php?r=gallery%2Fcreate 共同标准.js:10http://localhost:8081/traveling/uploads/dropzone

第10行的common.js是

var url=”http://localhost:8081/traveling/uploads/dropzone";

它上传到dropzone了吗？嘿，你能告诉我你是如何在控制器中使用

$\u get

或

$\u POST

方法得到dropzone上传的文件的吗？在控制器文件

if（$model->load（Yii:$app->request->POST（））{if（！empty（$\u files））{tmpFile=$\u files['file']['tmp_name']；$filename='image-'.time（）.$\u FILES['file']['name']；$uploadDir=Yii:：getAlias（@dropzoneDir”）./'.$filename；move_uploadd_file（$tmpFile，$filename）}$model->save（）；返回$this->重定向（['index']）；}其他{返回$this->render（'create'，['model'=>$model，]）；}