2017-07-28 33 views
-1

私はCodeigniterを初めて使用しています。私はいくつかのテキスト入力フィールドと2つの画像アップロードフィールドと共にフォームを作成しようとしています。イメージのアップロードは正常に機能しますが、テキスト入力フィールドの値は表示されません。誰もが私のコードをチェックして、私が間違ってここでやっているところを教えてくださいすることができますが、私のコードです: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> 

コントローラスクリプトは、この

 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; 

     } 

されており、誰もが私のコントローラを向上させることができれば非常に参考になるコードです。

+0

ここでは、あなたがここでアップロード時に誤って削除する 'accept-charset =" utf-8 enctype = "multipart/form-data" "' – Sparky

+0

というような引用符で問題があるようです。私はそれを確認しましたが、それは問題ではありません – Racoon

+0

ええ、それはまだ私が入力したテキスト値ではなく、画像の場所を取得してアップロードしています。私は余分な見積もりを削除しても問題は解決されたままであることを確認しました – Racoon

答えて

1

いるFormData()メソッド:私たちの定義に従って

.FormData()Key/Value形式の要素データを提出します。 Form要素にはname属性が必要です。 FormData()の利点の1つは、次のページにファイルを投稿できるようになったことです。

単純な構文:

var formData = new FormData(form); 

ハイライトポイント:

  1. このメソッドは、ファイルを投稿しません。

  2. このメソッドは、ファイルを含む投稿&メソッドを使用して完全なフォームを投稿します。

    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

うわー! tyx shyamそのコードuは魅力のような作品をくれました.. その1つは動作しませんが、そのok :) 私はサポートShyamのために非常に満足しています:)) – Racoon

+0

私はなぜこのような行動isn自動的にすべての入力フィールドの配列を自動的に作成するのではなく、新しい配列をループで作成することになっていましたか? – Racoon

関連する問題