如何解决在单个表单中使用多个 Dropzone JS 上传图像
我与 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>控制器代码
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。如下图所示，两个文件夹都具有相同的上传图像。
任何帮助/建议将不胜感激。提前致谢:)
解决方法
好吧，我问的问题非常雄心勃勃，所以我将坚持使用更简单的方法来实现上传。所以我将坚持使用@AlexanderDobernig 给出的例子
链接建议Here
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。