2017-07-28 45 views
-1

我對Codeigniter非常陌生。我嘗試創建一個帶有一些文本輸入字段以及兩個圖像上傳字段的表單。圖片上傳工作正常,但文本輸入字段值不會來。任何人都可以請檢查我的代碼,並告訴我,我做錯了這裏是我的代碼:我在codeigniter中的表單輸入中沒有得到任何文本值

前端

<body> 
     <div class="custom-container"> 
     <div id="msg"></div> 
      <form id="product-upload" action="/index.php/uploadproduct/upload" method="POST" accept-charset="utf-8" enctype="multipart/form-data""> 
       <div class="form-group"> 
        <label for="product-name">Product name</label> 
        <input type="text" name="product_name" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <label for="product-name">Product Code</label> 
        <input type="text" name="product_code" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <label for="product-name">Product Link</label> 
        <input type="text" name="product_link" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <label for="product-image">Product image</label> 
        <input type="file" id="product-image" name="product_image" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <label for="product-name">Product Screenshots</label> 
        <input type="file" id="product-screen" name="product_screen" class="form-control" multiple> 
       </div> 
       <div class="form-group"> 
        <input id="add-product" type="Submit" class="btn btn-primary" value="Add new product"> 
       </div> 
      </form> 
     </div> 
    </body> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#add-product').click(function(e){ 
       e.preventDefault(); 
       var formData = new FormData(); 

       //for product profile images 
       var productProfile = $('#product-image').prop('files')[0]; 
       formData.append('file',productProfile); 

       // for product detail image 
       var imageCount = document.getElementById('product-screen').files.length; 
       for (var i = 0; i< imageCount; i++) { 
        formData.append("files[]", document.getElementById('product-screen').files[i]); 
       } 


       //AJAX Call 
       $.ajax({ 
        url: 'http://localhost/ci/index.php/uploadproduct/upload/', // point to server-side controller method 
        dataType: 'text', // what to expect back from the server 
        cache: false, 
        contentType: false, 
        processData: false, 
        data: formData, 
        type: 'post', 
        beforeSend: function() { 
         // setting a timeout 
         $('#msg').html('Loading'); 
        }, 
        success: function (response) { 
         $('#msg').html(response); // display success response from the server 
         $('input').attr('value').html(); 
        }, 
        error: function (response) { 
         $('#msg').html("no response"); // display error response from the server 
        } 
       }); 
      }); 
     }); 

    </script> 

控制器Script是這個

 public function upload(){ 
      $uploadData = ""; 
      //Get the details 
      $productName = $_POST['product_name']; 
      $productCode = $this->input->post('product_code'); 
      $productLink = $this->input->post('product_link'); 
      $uploadData = $productName.','.$productCode.','.$productLink; 

      // setting cofig for image upload 
      $config['upload_path'] = 'uploads/profile/'; 
      $config['allowed_types'] = '*'; 
      $config['max_filename'] = '255'; 
      $config['encrypt_name'] = TRUE; 
      //$config['max_size'] = '1024'; //1 MB 

      // Get the profile image 
      $errorMsg = ""; 
      if (isset($_FILES['file']['name'])) { 
       if (0 < $_FILES['file']['error']) { 
        $errorMsg = 'Error during file upload' . $_FILES['file']['error']; 
       } else { 
        if (file_exists('uploads/profile/' . $_FILES['file']['name'])) { 
         $errorMsg = 'File already exists : uploads/profile/' . $_FILES['file']['name']; 
        } else { 
         $this->load->library('upload', $config); 
         if (!$this->upload->do_upload('file')) { 
          $errorMsg = $this->upload->display_errors(); 
         } else { 
          $data = $this->upload->data(); 

          $errorMsg = 'File successfully uploaded : uploads/profile/' . $_FILES['file']['name']; 
          $uploadData = $uploadData.','.$data['full_path']; 
         } 
        } 
       } 
      } else { 
       $errorMsg = 'Please choose a file'; 
      } 


      //upload product screenshots 
      $config['upload_path'] = 'uploads/'; 
      if (isset($_FILES['files']) && !empty($_FILES['files'])) { 
       $no_files = count($_FILES["files"]['name']); 
       $link=""; 
       for ($i = 0; $i < $no_files; $i++) { 
        if ($_FILES["files"]["error"][$i] > 0) { 
         $errorMsg = "Error: " . $_FILES["files"]["error"][$i] . "<br>"; 
        } else { 
         if (file_exists('uploads/' . $_FILES["files"]["name"][$i])) { 
          $errorMsg = 'File already exists : uploads/' . $_FILES["files"]["name"][$i]; 
         } else { 
          $fileOriginalNmame = $_FILES["files"]["name"][$i]; 
          $explodeFile = explode(".",$fileOriginalNmame); 
          $fileExtenstion = end($explodeFile); 
          $fileName = md5(md5(uniqid(rand(), true)).$_FILES["files"]["name"][$i]).'.'.$fileExtenstion; 
          move_uploaded_file($_FILES["files"]["tmp_name"][$i], 'uploads/' . $fileName); 

          $link= $link.$fileName.','; 



         } 
        } 

       } 
       $uploadData =$uploadData .','. $link; 
       $errorMsg = $uploadData; 
      } else { 
       $errorMsg = 'Please choose at least one file'; 
      } 

      echo $errorMsg; 

     } 

如果任何人都可以提高我的控制器代碼將是非常有用的tnx。

+0

似乎你在這裏有引號的問題:'accept-charset =「utf-8 enctype =」multipart/form-data「」 – Sparky

+0

我在上傳的時候誤刪除了這裏..但這不是問題,雖然我檢查了 – Racoon

+0

是的,它仍然上傳我得到的圖像位置,因爲我想但不是輸入文本值。我檢查刪除多餘的報價仍然問題仍然存在 – Racoon

回答

1

FORMDATA()方法:

根據我們的定義.FormData()Key/Value表單提交元件的數據。 Form元素必須有一個name屬性。 FormData()的一個優點是您現在可以在下一頁上發佈文件。

簡單的語法:

var formData = new FormData(form); 

高亮點:

  1. 這種方法確實後的文件。

  2. 此方法發佈完整表格使用獲取&包括文件的Post方法。

    var formData = new FormData();

    formData.append('username','joe');

  3. 此外,你可以使用FormData.append添加一個鍵/值對。

因此,您的代碼中斷了,因爲您需要將輸入的值作爲您遺漏的鍵/對格式除外的文件。

希望這會幫助你。

請在下面找到解決方案。

$(document).ready(function(){ 
 
      $('#add-product').click(function(e){ 
 
       e.preventDefault(); 
 
       var formData = new FormData(); 
 

 
       //for product profile images 
 
       var productProfile = $('#product-image').prop('files')[0]; 
 
       formData.append('file',productProfile); 
 

 
       // for product detail image 
 
       var imageCount = document.getElementById('product-screen').files.length; 
 
       for (var i = 0; i< imageCount; i++) { 
 
        formData.append("files[]", document.getElementById('product-screen').files[i]); 
 
       } 
 
       var inputs = $('#product-upload input[type="text"],input[type="email"]'); 
 
       $.each(inputs, function(obj, v) { 
 
        var name = $(v).attr("name"); 
 
        var value = $(v).val(); 
 
        formData.append(name, value); 
 
       }); 
 
       
 

 
       //AJAX Call 
 
       $.ajax({ 
 
        url: 'http://localhost/ci/index.php/uploadproduct/upload/', // point to server-side controller method 
 
        dataType: 'text', // what to expect back from the server 
 
        cache: false, 
 
        contentType: false, 
 
        processData: false, 
 
        data: formData, 
 
        type: 'post', 
 
        beforeSend: function() { 
 
         // setting a timeout 
 
         $('#msg').html('Loading'); 
 
        }, 
 
        success: function (response) { 
 
         $('#msg').html(response); // display success response from the server 
 
         $('input').attr('value').html(); 
 
        }, 
 
        error: function (response) { 
 
         $('#msg').html("no response"); // display error response from the server 
 
        } 
 
       }); 
 
      }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-container"> 
 
     <div id="msg"></div> 
 
      <form id="product-upload" action="/index.php/uploadproduct/upload" method="POST" accept-charset="utf-8" enctype="multipart/form-data"> 
 
       <div class="form-group"> 
 
        <label for="product-name">Product name</label> 
 
        <input type="text" name="product_name" class="form-control"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="product-name">Product Code</label> 
 
        <input type="text" name="product_code" class="form-control"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="product-name">Product Link</label> 
 
        <input type="text" name="product_link" class="form-control"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="product-image">Product image</label> 
 
        <input type="file" id="product-image" name="product_image" class="form-control"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="product-name">Product Screenshots</label> 
 
        <input type="file" id="product-screen" name="product_screen" class="form-control" multiple> 
 
       </div> 
 
       <div class="form-group"> 
 
        <input id="add-product" type="Submit" class="btn btn-primary" value="Add new product"> 
 
       </div> 
 
      </form> 
 
     </div>

讓我知道,如果它不爲你工作。

+0

你也可以檢查相同類型的查詢與答案在這裏https://stackoverflow.com/a/45206322/1441822 –

+0

哇! tnx shyam那個代碼給你的作品像一個魅力.. 鏈接一個不工作,雖然但它確定:)) 我很高興tyvm的支持Shyam :)) – Racoon

+0

我想知道爲什麼這樣的行爲isn formdata應該自動創建一個所有輸入字段的數組,而不是通過循環創建一個新的數組? – Racoon

相關問題