通过CodeIgniter中的jQuery AJAX插入和移动多个图像 [英] Insert and move multiple images via jQuery AJAX in CodeIgniter
问题描述
视图:
$("#submit").on('click',function(e){
e.preventDefault();
product_name = $("#product_name").val();
category = $("#category").val();
var formData = new FormData();
$.each($("#product_image"), function (i, obj) {
$.each(obj.files, function (j, file) {
formData.append('product_image[' + i + ']', file);
});
});
formData.append('product_name', product_name);
formData.append('category', category);
$.ajax({
type:"POST",
data:formData,
processData: false,
contentType: false,
url:"<?php echo base_url(); ?>admin/products",
success:function(data){
alert(data);
}
});
});
控制器:
public function products()
{
$dataInfo = array();
$files = $_FILES;
$cpt = count($_FILES['product_image']['name']);
for($i=0; $i<$cpt; $i++)
{
$_FILES['product_image']['name']= $files['product_image']['name'][$i];
$_FILES['product_image']['type']= $files['product_image']['type'][$i];
$_FILES['product_image']['tmp_name']= $files['product_image']['tmp_name'][$i];
$_FILES['product_image']['error']= $files['product_image']['error'][$i];
$_FILES['product_image']['size']= $files['product_image']['size'][$i];
$this->upload->initialize($this->set_upload_options());
$this->upload->do_upload();
$dataInfo[] = $this->upload->data();
}
$data = array(
'product_name' => $this->input->post('product_name'),
'category' => $this->input->post('category'),
'product_image' => implode(",",array_column($dataInfo, 'product_image'))
);
$sql = $this->db->insert('add_product',$data);
if($sql == true)
{
echo 'New Product Added';
}
else
{
echo 'Unable to Proceed!';
}
}
private function set_upload_options()
{
$config = array();
$config['upload_path'] = ''.base_url().'resource/product/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '0';
$config['overwrite'] = FALSE;
return $config;
}
我有三个输入字段，即product_name,category and product_image.现在，我想移动多个图像并插入以逗号(，)分隔的product_image名称，例如img1.jpg,img2.jpg,img3.jpg.现在，当我警报响应时，它什么也没有显示.那么，我该如何解决?请帮助我.
I have three input field i.e. product_name,category and product_image. Now, I wants to move multiple images and insert product_image name which is separated by comma(,) for example img1.jpg,img2.jpg,img3.jpg like that. Now, when I alert reponse it show nothing. So, How can I solve ? Please help me.
预期的mysql之类的输出演示
expected output demo of mysql like
product_name category product_images
============ ======== ==============
men t-shirt MEN img1.jp,img2.jpg,img3.jpg
kids t-shirt kids img1.jp,img2.jpg,img3.jpg
推荐答案
在这里从A到Z给出关于如何使用Ajax上传多个文件的完整答案，首先在视图中，您可以输入尽可能多的文件输入您想要的但作为这样的一系列数组:
Ok here a complete answer from A to Z of how to upload multiple files using ajax, first of all in the view, you can put as many file inputs as you want but as an array of course like this:
<form enctype="multipart/form-data" action="<?php echo base_url('') ?>" method="post">
<input name="files[]" type="file" />
<input name="files[]" type="file" />
<input type="button" value="Upload" id="upload"/>
</form>
然后像这样的ajax，没有任何开销，只是正常的提交:
Then your ajax like this, no overhead whatsoever, just a normal submission:
$('#upload').click(function(e) {
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: "<?php echo base_url() ?>",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
},
error: function(response) {
}
});
});
但是此代码将像这样通过$_FILES:
But this code will pass $_FILES like this:
array(1) {
["files"]=>
array(5) {
["name"]=>
array(2) {
[0]=>
string(10) "imgOne.jpg"
[1]=>
string(31) "imgTwo.png"
}
["type"]=>
array(2) {
[0]=>
string(10) "image/jpeg"
[1]=>
string(9) "image/png"
}
["tmp_name"]=>
array(2) {
[0]=>
string(24) "C:\xampp\tmp\phpF867.tmp"
[1]=>
string(24) "C:\xampp\tmp\phpF878.tmp"
}
["error"]=>
array(2) {
[0]=>
int(0)
[1]=>
int(0)
}
["size"]=>
array(2) {
[0]=>
int(358419)
[1]=>
int(72657)
}
}
}
这就是问题所在，因此我们必须像这样在控制器的方法中重新排列此数组:
And that's the problem, so we have to rearrange this array in your controller's method like this:
$files = array();
foreach ($_FILES['files'] as $property => $array)
{
foreach ($array as $key => $value)
{
$files[$key][$property] = $value;
}
}
这将为您提供一个适当的数组，如下所示:
And this will give you a proper array like this:
array(2) {
[0]=>
array(5) {
["name"]=>
string(10) "imgOne.jpg"
["type"]=>
string(10) "image/jpeg"
["tmp_name"]=>
string(24) "C:\xampp\tmp\phpF867.tmp"
["error"]=>
int(0)
["size"]=>
int(358419)
}
[1]=>
array(5) {
["name"]=>
string(31) "imgTwo.png"
["type"]=>
string(9) "image/png"
["tmp_name"]=>
string(24) "C:\xampp\tmp\phpF878.tmp"
["error"]=>
int(0)
["size"]=>
int(72657)
}
}
现在，您可以使用CodeIgniter遍历该数组和do_upload，但是首先让我们使用新数组重新初始化$_FILES，然后使用我们的配置加载上载库并像这样循环遍历:
Now you can loop through this array and do_upload with CodeIgniter, but first lets reinitialize our $_FILES with the new array and then load upload library with our configs and loop through it like this:
$_FILES = $files;
$config['upload_path'] = FCPATH.'uploads/';
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_size'] = '2048';
$this->load->library('upload', $config);
foreach ($_FILES as $fieldname => $fileobject)
{
if (!empty($fileobject['name']))
{
$this->upload->initialize($config);
if (!$this->upload->do_upload($fieldname))
{
$errors[$fileobject['name']] = $this->upload->display_errors();
}
else
{
$success[$fileobject['name']] = 'Success';
}
}
}
就是这样.
这篇关于通过CodeIgniter中的jQuery AJAX插入和移动多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
