在一个表单中使用多个 Dropzone JS 上传图像

Question

我用 dropzone JS 创建了一个转发器表单。现在中继器很好，可以 POST 到 DB。现在的问题是图像上传部分。因此，由于问题出在图片上传部分，我创建了一个测试表单，在其中单击“添加”按钮，拖放区将在内部复制自身。当我上传时，它成功了，但它只上传了我上传的最后一个拖放区。我正在为此使用 PHP Codeigniter Framework。

问题是，我如何拆分这些上传，例如，Dropzone1 上传到文件夹 123，Dropzone2 上传到文件夹 987，等等。以 1 个 POST 形式

我的 HTML 和 JS 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Image Test Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Test Image Form</h2>
  <button type="button" class="btn btn-primary" id="addTest">Add</button>
  <form action="admin/testInsert" method="post">
    

    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Enter email" name="name[]">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd[]">
    </div>
    <div class="form-group">
      <label for="desc">Description:</label>
      <input type="text" class="form-control" id="desc" placeholder="Enter password" name="desc[]">
    </div>
    <div id="testDiv">
        <div class="mb-3">
        <div class="form-group">
        <label class="col-lg-3 col-form-label">Images</label>
        <div class="col-lg-6">
         <div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_1">
          <div class="dropzone-msg dz-message needsclick">
            <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
            <span class="dropzone-msg-desc">Upload up to 6 files</span>
          </div>
        </div>
        </div>
        </div>
        </div>

    </div>
    <button type="submit" id="subBtn" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

<script type="text/javascript">

        $(document).ready(function(){      

            var i= 1;

         $('#addTest').click(function(){  
               i++;

               //$('#testDiv').append('</br><div id="row'+i+'"><h3 class="font-size-lg text-dark font-weight-bold mb-6">2. Product Detail Media:</h3><div class="mb-3"><div class="form-group"><div class="col-lg-6"><div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_'+i+'"><div class="dropzone-msg dz-message needsclick"><h3 class="dropzone-msg-title">Drop files here or click to upload.</h3><span class="dropzone-msg-desc">Upload up to 6 files</span></div></div></div></div></div><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button> </div> ');
                $('#testDiv').append('<div class="form-group"><label for="email">Email:</label><input type="text" class="form-control" id="email" placeholder="Enter email" name="name[]"></div>');
               $('#testDiv').append('<div class="form-group"><label for="pwd">Description:</label><textarea type="text" class="form-control" id="desc" placeholder="Enter desc" name="desc[]" ></textarea></div>');
               $('#testDiv').append('<div class="form-group"><label for="pwd">Password:</label><input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd[]"></div>');

               $('#testDiv').append('<div class="mb-3"><div class="form-group"><label class="col-lg-3 col-form-label">Images</label><div class="col-lg-6"><div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_'+i+'"><div class="dropzone-msg dz-message needsclick"><h3 class="dropzone-msg-title">Drop files here or click to upload.</h3><span class="dropzone-msg-desc">Upload up to 6 files</span></div></div></div></div></div>');


               console.log(i);

               var myDropzone = new Dropzone('#kt_dropzone_'+i+'',{
                    //url: "admin/upload_file", // Set the url for your upload script location
                    url: "admin/testUpload",
                    paramName: "file", // The name that will be used to transfer the file
                    uploadMultiple: true,
                    maxFiles: 6,
                    maxFilesize: 2, // MB
                    parallelUploads: 10,
                    addRemoveLinks: true,
                    autoProcessQueue: false,
                    acceptedFiles: "image/*",
                    accept: function(file, done) {
                        if (file.name == "justinbieber.jpg") {
                            done("Naha, you don't.");
                        } else {
                            done();
                        }
                    }
                }); 

               $('#subBtn').on('click', function () {
                myDropzone.processQueue();
            });

          });
          
        }); 

        
    </script>

控制器代码

public function testUpload(){
        $this->Admin_model->test();
    }

模型上传代码

function test(){

        $prodDetID = $this->session->tempdata('item');

        $this->load->library('ftp');

        $config['hostname'] = '127.0.0.1';
        $config['username'] = 'root';
        $config['password'] = '';
        $config['debug']    = TRUE;

        $this->ftp->connect($config);

        foreach($prodDetID as $val){
            if(!is_dir('./upload/assets/ProductDetail/'.$val))
            {
            mkdir('./upload/assets/ProductDetail/'.$val,077,TRUE);

            }
            $num_files = count($_FILES['file']['name']);
            
            for($i = 0; $i < $num_files; $i++){
              $img = pathinfo($_FILES['file']['name'][$i], PATHINFO_EXTENSION);
              $imgName = $val."".date('YmdHis').'.'.$img;
              $test = $this->ftp->upload($_FILES['file']['tmp_name'][$i], "upload/assets/ProductDetail/$val/".$_FILES['file']['name'][$i], 'auto');
          }

        }
        $this->session->unset_tempdata('item');

        
    }

下图是视图的输出

单击提交按钮时，基础插入 ID 为 29 和 30。文件夹 29 和 30 已创建。如下图所示，两个文件夹都有相同的上传图像。

任何help/advice将不胜感激。提前致谢:)

Answer 1

好吧，我问的问题很有野心，所以我会坚持使用更简单的方法来实现上传。所以我将坚持使用@AlexanderDobernig

给出的例子

Link 建议 Here

在一个表单中使用多个 Dropzone JS 上传图像

Upload Images with multiple Dropzone JS in a single Form

javascript

php

codeigniter

dropzone.js