【发布时间】：2021-05-05 08:11:40
【问题描述】：
我和 dropzone JS 一起创建了一个中继器表单。现在中继器很好，可以 POST 到数据库。现在的问题是图像上传部分。因此，由于问题是图像上传部分，我创建了一个测试表单，在其中单击“添加”按钮，dropzone 将在内部复制自身。当我上传时，它是成功的，但它只上传我上传的最后一个 dropzone。我正在为此使用 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。如下图所示，两个文件夹都有相同的上传图像。
任何帮助/建议将不胜感激。在此先感谢:)
【问题讨论】：
-
你的代码怎么知道图片属于哪个目录？您可以使用参数为上传脚本提供保存图像的位置信息。从文档中：Dropzone 将提交您在 dropzone 表单中的所有隐藏字段。所以这是提交附加数据的简单方法。您也可以使用 params 选项。
-
@AlexanderDobernig 在模型中，拍摄的图像将存储在基于每次创建某些东西时生成的随机 ID 创建的文件夹中。现在的问题是，是否可以识别或指定不同的放置区。例如，DZ 1 有 2 个 img，DZ 2 有 5 个 img。提交后，图像将分别存储在文件夹 123 和 987 中，其中文件夹是从随机生成的 id 新创建的
-
您的意思是“现在的问题，不可能吗？？
-
感谢@AlexanderDobernig 的建议。在与我的同事讨论后，他们指出我想要的是非常雄心勃勃的，并决定我们应该只限制追加，只做一个 1 个的 dropzones。
标签： javascript php codeigniter dropzone.js