第二次输入后我无法上传任何图像。我只能上传第一个输入。添加另一个输入值时,动态创建输入。以下是代码:
\\ jquery //
function storeupdate(){
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>updatestore",
data:$("#mainstore").serialize(),
success: function(response){
var data = new FormData();
input = document.getElementById('file');
for(var i = 0; i < input.files.length; i++)
{
data.append('images[]', document.getElementById('file').files[i]);
}
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>storeupload',
cache: false,
contentType: false,
processData: false,
data : data,
success: function(result){
console.log(result);
},
error: function(err){
console.log(err);
}
});
swal('Successful!', 'Data has been saved!', 'success');
//window.location.reload();
},
error: function() {
swal("Oops", "We couldn't connect to the server!", "error");
}
});
return false;
};
\\ view //
<input type="file" name="images[]" id="file" class="file" accept="image/*;capture=camera" multiple="multiple" />
<button type="button" class="btn btn-success save" id="save" name="save" onclick="storeupdate();" disabled>Save</button>
\\ controller //
public function storeupload()
{
$files= $_FILES;
$cpt = count ($_FILES['images']['name']);
for($i = 0; $i < $cpt; $i ++) {
$_FILES['images']['name'] = $files['images']['name'][$i];
$_FILES['images']['type'] = $files['images']['type'][$i];
$_FILES['images']['tmp_name'] = $files['images']['tmp_name'][$i];
$_FILES['images']['error'] = $files['images']['error'][$i];
$_FILES['images']['size'] = $files['images']['size'][$i];
$this->upload->initialize ( $this->set_upload_options1() );
$this->upload->do_upload("images");
$fileName = $_FILES['images']['name'];
$images[] = $fileName;
}
}
答案 0 :(得分:2)
我制作并测试了一些代码示例,以便您可以看到错误。你有一些错误。我建议的第一件事实际上是使用jQuery。你的代码显然是使用jQuery,但你有各种可以简化的vanilla JS:
$(document).ready(function(){
$('#save').on('click', function(){
var fileInput = $('#file_input')[0];
if( fileInput.files.length > 0 ){
var formData = new FormData();
$.each(fileInput.files, function(k,file){
formData.append('images[]', file);
});
$.ajax({
method: 'post',
url:"/multi_uploader/process",
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(response){
console.log(response);
}
});
}else{
console.log('No Files Selected');
}
});
});
请注意,我在ajax URL中进行了硬编码。我用于测试的控制器名为Multi_uploader.php。
接下来是在你的控制器中循环遍历$ _FILES时,需要将其转换为&#34; userfile&#34;。如果您打算使用CodeIgniter上传类,这一点非常重要:
public function process()
{
$F = array();
$count_uploaded_files = count( $_FILES['images']['name'] );
$files = $_FILES;
for( $i = 0; $i < $count_uploaded_files; $i++ )
{
$_FILES['userfile'] = [
'name' => $files['images']['name'][$i],
'type' => $files['images']['type'][$i],
'tmp_name' => $files['images']['tmp_name'][$i],
'error' => $files['images']['error'][$i],
'size' => $files['images']['size'][$i]
];
$F[] = $_FILES['userfile'];
// Here is where you do your CodeIgniter upload ...
}
echo json_encode($F);
}
这是我用于测试的视图:
<!doctype html>
<html>
<head>
<title>Multi Uploader</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/js/multi_uploader.js"></script>
</head>
<body>
<form>
<input type="file" name="images[]" id="file_input" multiple />
<button type="button" id="save">Upload</button>
</form>
</body>
</html>
最后,为了证明文件已上传到控制器,并且我可以将它们与CodeIgniter一起使用,我将ajax响应作为json编码数组发送,并将其显示在控制台中。请参阅代码注释,将您的CodeIgniter上传代码放在哪里。
如果你想拥有多个文件输入,那么这显然会改变你的HTML和JS。在这种情况下,您的HTML将具有多个输入:
<input type="file" name="images[]" class="file_input" multiple />
<input type="file" name="images[]" class="file_input" multiple />
<input type="file" name="images[]" class="file_input" multiple />
<input type="file" name="images[]" class="file_input" multiple />
你的javascript需要改变以循环每个输入:
$(document).ready(function(){
$('#save').on('click', function(){
var fileInputs = $('.file_input');
var formData = new FormData();
$.each(fileInputs, function(i,fileInput){
if( fileInput.files.length > 0 ){
$.each(fileInput.files, function(k,file){
formData.append('images[]', file);
});
}
});
$.ajax({
method: 'post',
url:"/multi_uploader/process",
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(response){
console.log(response);
}
});
});
});
使用CodeIgniter进行上传时,会提供上传摘要:
$summary = $this->upload->data();
这是一组数据,最终看起来像这样:
$summary = array(
'file_name' => 'mypic.jpg',
'file_type' => 'image/jpeg',
'file_path' => '/path/to/your/upload/',
'full_path' => '/path/to/your/upload/jpg.jpg',
'raw_name' => 'mypic',
'orig_name' => 'mypic.jpg',
'client_name' => 'mypic.jpg',
'file_ext' => '.jpg',
'file_size' => 22.2
'is_image' => 1
'image_width' => 800
'image_height' => 600
'image_type' => 'jpeg',
'image_size_str' => 'width="800" height="200"'
);
因此,每次上传后,您需要做的就是将记录添加到数据库中:
$summary = $this->upload->data();
$this->db->insert('storefiles', array(
'Store_ID' => $_POST['storeid'],
'File_Name' => $summary['file_name'],
'Created' => date('Y-m-d h:i:s'),
'Modified' => date('Y-m-d h:i:s')
));
很容易看出你可以存储的不仅仅是文件名。
答案 1 :(得分:0)
我知道这个问题很老,但是对于像我这样在循环中使用 Code Igniter 文件上传库后遇到此错误的人:is_uploaded_file() expects parameter 1 to be string, array given
像这样:
for ( $i = 0; $i < count($var); $i++ )
{
// other codes here
// Do codeigniter upload
$this->upload->do_upload('images');
}
您可以做的是不要在 do_upload()
函数中放置任何参数。像这样:
$this->upload->do_upload();