使用CodeIgniter和Ajax在每个输入中上传多个文件

第二次输入后我无法上传任何图像。 我只能上传第一个输入。 添加另一个输入值时，动态创建输入。 以下是代码：

\\ jquery // function storeupdate(){ $.ajax({ type:"POST", 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: '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 //  Save \\ controller // public function storeupload() { $files= $_FILES; $cpt = count ($_FILES['images']['name']); for($i = 0; $i upload->initialize ( $this->set_upload_options1() ); $this->upload->do_upload("images"); $fileName = $_FILES['images']['name']; $images[] = $fileName; } } 

Answer 1

我制作并测试了一些代码示例，以便您可以看到错误。 你有一些错误。 我建议的第一件事实际上是使用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的控制器中，需要将其转换为“userfile”。 如果您计划使用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); } 

这是我用于测试的视图：

         
  Upload 
   

最后，为了certificate文件已上传到控制器，并且我可以将它们与CodeIgniter一起使用，我将ajax响应作为json编码数组发送，并在控制台中显示它。 请参阅代码注释，您将放置CodeIgniter上载代码。

更新（显示如何处理多个文件输入）—

如果你想拥有多个文件输入，那么这显然会改变你的HTML和JS。 在这种情况下，您的HTML将具有多个输入：

并且您的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('Ymd h:i:s'), 'Modified' => date('Ymd h:i:s') )); 

很容易看出你可以存储的不仅仅是文件名。