通過Ajax上傳圖片時出現錯誤

Question

im上傳ajax的多個文件時遇到問題。這是我的代碼。

HTML代碼： -

<input type="file" id="txtBusinessImage" class="form-control" name="txtBusinessImageName[]" multiple > 

    <input type="hidden" id="selectBusinessHiddenID" name="selectBusinessHiddenID" value="<?php echo $viewCompanyResult->company_id; ?>"> 

    <input type="button" id="uploadBusinessImg" value="Upload" > 

Ajax代碼： -

$("#uploadBusinessImg").on("click",function(e) 
{ 
       var fd = new FormData(); 
       var file_data = $("#txtBusinessImage")[0].files; // for multiple files 
       for(var i = 0;i<file_data.length;i++){ 
        fd.append("file"+[i], file_data[i]); 
       } 
       var other_data = $("#selectBusinessHiddenID").serializeArray(); 
       $.each(other_data,function(key,input){ 
        fd.append(input.name,input.value); 
       }); 

       $.ajax({ 
        url: '<?php echo site_url('Main_ctrl/upload_business_photo_do'); ?>', 
        data: fd, 
        enctype: 'multipart/form-data', 
        contentType: false, 
        processData: false, 
        type: 'POST', async : true, 
        success: function(data){ 
         alert(data); 
        } 
       }); 
}); 

當IM調用upload_business_photo_do（）通過Ajax功能，那麼它簡化版，能夠recive圖像$ _FILES的名字[ 'file'] ['name']

upload_business_photo_do() 
{ 
    $business_hidden_id=$this->input->post('selectBusinessHiddenID'); 

     /*code for image*/ 
     $config['upload_path']='./upload_101/'; 
     $config['allowed_types']= 'jpg|png|jpeg'; 
     $config['max_width'] = '6000'; 
     $config['max_height'] = '4500'; 

     $this->load->library('upload',$config); 
     for($i=0; $i<count($_FILES['file']['name']); $i++) 
     { 
      $_FILES['userfile']['name']= $_FILES['file']['name'][$i]; 
      $_FILES['userfile']['type']= $_FILES['file']['type'][$i]; 
      $_FILES['userfile']['tmp_name']= $_FILES['file']['tmp_name'][$i]; 
      $_FILES['userfile']['error']= $_FILES['file']['error'][$i]; 
      $_FILES['userfile']['size']= $_FILES['file']['size'][$i]; 

      if(! $this->upload->do_upload()) 
      { 
       /*----set flash message*/ 
       echo "error"; 

      } 
      else 
      { 
       echo "done"; 

      } 

     } 
} 

Answer 1

嘗試這樣使用，它的簡單和容易

$("#uploadBusinessImg").on("click",function(e) 
    { 

       var formData = new FormData($("#form_name")[0]); 
       $.ajax({ 
        url: '<?php echo site_url('Main_ctrl/upload_business_photo_do'); ?>', 
        processData: false, 
        contentType: false, 
        data: formData, 
        type: 'POST', async : true, 
        success: function(data){ 
         alert(data); 
        } 
       }); 
     }); 

，並在控制器使用這樣

if($_FILES['txtBusinessImageName']) 
    { 
     $file_ary = $this->reArrayFiles($_FILES['txtBusinessImageName']); 

     foreach ($file_ary as $file) 
     { 
      print 'File Name: ' . $file['name']; 
      print 'File Type: ' . $file['type']; 
      print 'File Size: ' . $file['size']; 
     } 
    } 

，還可以使用此功能用於將文件數據轉換爲多個圖像數據的陣列

function reArrayFiles(&$file_post) { 

    $file_ary = array(); 
    $file_count = count($file_post['name']); 
    $file_keys = array_keys($file_post); 

    for ($i=0; $i<$file_count; $i++) { 
     foreach ($file_keys as $key) { 
      $file_ary[$i][$key] = $file_post[$key][$i]; 
     } 
    } 

    return $file_ary; 
} 

其工作完美，只是嘗試使用它。你不需要用ajax添加額外的文件代碼。

Answer 2

使用表單標籤並提交文件上傳按鈕。

<form method="post" enctype="multipart/form-data"> 
<input type="file" id="txtBusinessImage" class="form-control" name="txtBusinessImageName[]" multiple > 
<input type="hidden" id="selectBusinessHiddenID" name="selectBusinessHiddenID" value="<?php echo $viewCompanyResult->company_id; ?>"> 
<input type="submit" id="uploadBusinessImg" value="Upload"> 
</form> 

並從ajax調用並嘗試刪除ententype：'multipart/form-data'。

以下爲取文件變化：

var file_data = $('#txtBusinessImage').prop('files')[0]; 
var fd = new FormData();     
fd.append('file', file_data);