在一个表单中上传具有多个 Dropzone JS 的图像

Question

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

问题是，我怎样才能拆分这些上传，例如，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>

Controller 代码

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

Model 中的上传代码

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');

        
    }

下图是视图的 output

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

任何帮助/建议将不胜感激。 提前致谢：）

Answer 1

好吧，我问的问题非常雄心勃勃，所以我将坚持使用更简单的方法来实现上传。 所以我会坚持使用@AlexanderDobernig 给出的例子

此处推荐链接

在一个表单中上传具有多个 Dropzone JS 的图像

问题描述

1 个解决方案

解决方案1
0 2021-02-02 05:46:14

在一个表单中上传具有多个 Dropzone JS 的图像

问题描述

1 个解决方案

解决方案1 0 2021-02-02 05:46:14

解决方案1
0 2021-02-02 05:46:14