2016-04-15 9 views
1

私はクライアント側から自分のphp apacheサーバーに画像をアップロードする以下のhtmlコードを持っています。 バックエンド、私はcodeigniterフォームのバリデーションを使用しました。ただし、以下のコードを使用すると、ユーザーの画像を自分のサーバーにアップロードすることはできません。 form_open(......)コード<?php $prevURLPATH=urlencode($prevURL); echo form_open('newPost/createNewPost/'.$userID.'/'.$username.'?prevURL='.$prevURLPATH); ?>にコメントすると、私のフォームが実際に動作します(これらのイメージは正常にポストされます)が、もちろんコード署名検証なしで実行されます。 そこに、 画像を投稿し、同時にコード署名の検証を使用することは可能ですか?Codeigniterフォームのバリデーション

<div id="wrapper"> 
<div class="main-container"> 
<div class="container"> 
    <?php echo validation_errors("<div style='color:red;'>","</div>"); ?> 

<?php $prevURLPATH=urlencode($prevURL); echo form_open('newPost/createNewPost/'.$userID.'/'.$username.'?prevURL='.$prevURLPATH); ?> 
    <div class="row"> 
    <div class="col-md-9 page-content"> 
     <div class="inner-box category-content"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <form id="newPost" class="form-horizontal" method="post" enctype="multipart/form-data" 
        action="<?php echo base_url(); echo MY_PATH;?>newPost/createNewPost/<?php echo $userID.'/'.$username.'?prevURL='.urlencode($prevURL); ?>"> 
       <fieldset> 
        …………. 
………………………………… 
     <div class="form-group row"> 
         <label class="col-md-3 control-label text-center" for="textarea"> 
          <i class="icon-camera-1"></i><abbr title="Min. 1 picture required."><?php echo $Picture;?></abbr><font color="red">*</font></label> 
         </label> 
         <div class="col-md-8"> 
          <div class="mb10"> 
           <input id="image" name="images[]" class="file" type="file" accept="image/*" multiple> 
           <div id="uploadImgError"> 
           </div> 
          </div> 
           <p class="help-block">Add up to 5 photos. Use a better image of your product, not catalogs.</p> 

         </div> 
        </div> 


     div class="form-group row"> 
         <label class="col-md-3 control-label text-center"></label> 
         <div class="col-md-8"> 
           <button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button> 
          <button id="validate" hidden="true" type="submit"></button> 
         </div> 
        </div> 
       </fieldset> 

     </form> 


      </div> 
     </div> 
     </div> 
    </div> 

次フォームを送信するJavaScript呼び出しです:

function setup() 
{ 
    var myform = document.getElementById("newPost"); 

      $('#pleaseWaitDialog').modal('show'); 

      setForm(function(data) 
      { 
       if(data == true) 
       { 
        var formData = new FormData(myform); 
        for (var i=0; i<fileList.length; i++){ 
         formData.append('filelist[]', fileList[i]); 
        } 
        $('#image').fileinput('clear'); 
        $('#image').fileinput('disable'); 
        $('#Adtitle').attr('disabled', 'disabled'); 
        $('#soldqty').attr('disabled', 'disabled'); 
        $('#descriptionTextarea').attr('disabled', 'disabled'); 
        $('#tagsInput').attr('disabled', 'disabled'); 
        $('#submit-upload-form').attr('disabled', 'disabled'); 
        $('#price').attr('disabled', 'disabled'); 
        //console.log (formData.get('image')); 
        $.ajax({ 
         xhr: function() 
         { 
          var xhr = new window.XMLHttpRequest(); 
          //Upload progress 
          xhr.upload.addEventListener("progress", function(evt){ 
           if (evt.lengthComputable) { 
           var percentComplete = evt.loaded/evt.total*100; 
           //Do something with upload progress 
           $("#upload-progress-bar").width(percentComplete+"%"); 

           } 
          }, false); 
          return xhr; 
         }, 
         url: "<?php echo base_url(); echo MY_PATH;?>newPost/createNewPost/<?php echo $userID.'/'.$username.'?prevURL='.urlencode($prevURL); ?>", 
         data: formData, 
         processData: false, 
         contentType: false, 
         type: 'POST', 
         success:function(msg){ 
          $("#modal-text").html("Your post has been successfully uploaded."); 
          setTimeout(function(){ 
           $("#modal-text").html("Your post will be reviewed and go on live within the next 24 hours."); 
           $('#fwd-btn').css("display", "block"); 
           $('#fwd-btn').css("margin", "auto"); 
           $('#progress-bar').css("display", "none"); 
          }, 2000); 
         } 
        }); 
       } 
       return data; 
      }); 
     } 
    }); 
} 
+0

複数のフォームを開いています。 1つはCI関数から、もう1つはプレーンhtmlから –

+0

私はフォームを初期化するためにCL関数を使用すると、HTML 5フォームは必要ありませんか? –

+0

はい。 Form_openはHTMLフォームコードのみを生成します。 –

答えて

0

まず、あなたの代わりにform_open()form_open_multipart()を使用する必要がありますが、おそらくそれは十分ではありません。

フォームの検証でファイルの入力が確認されていないため、理由はわかりませんが、確信しています。そのため、あなたはモデル内でそれを制御する必要があります。私は、フォーム送信を行うにURLを使用するsubmitボタンでjavascript関数jqueryの下に持って実際に

if(empty($_FILES)) 
{ 
return false; 
} 
else 
{ 
    //some code here 
} 
1

あなたは、この構造を使用することができます。どのようにそれを変更するには?

function setup() 
{ 
    var myform = document.getElementById("newPost"); 

      $('#pleaseWaitDialog').modal('show'); 

      setForm(function(data) 
      { 
       if(data == true) 
       { 
        var formData = new FormData(myform); 
        for (var i=0; i<fileList.length; i++){ 
         formData.append('filelist[]', fileList[i]); 
        } 
        $('#image').fileinput('clear'); 
        $('#image').fileinput('disable'); 
        $('#Adtitle').attr('disabled', 'disabled'); 
        $('#soldqty').attr('disabled', 'disabled'); 
        $('#descriptionTextarea').attr('disabled', 'disabled'); 
        $('#tagsInput').attr('disabled', 'disabled'); 
        $('#submit-upload-form').attr('disabled', 'disabled'); 
        $('#price').attr('disabled', 'disabled'); 
        //console.log (formData.get('image')); 
        $.ajax({ 
         xhr: function() 
         { 
          var xhr = new window.XMLHttpRequest(); 
          //Upload progress 
          xhr.upload.addEventListener("progress", function(evt){ 
           if (evt.lengthComputable) { 
           var percentComplete = evt.loaded/evt.total*100; 
           //Do something with upload progress 
           $("#upload-progress-bar").width(percentComplete+"%"); 

           } 
          }, false); 
          return xhr; 
         }, 
         url: "<?php echo base_url(); echo MY_PATH;?>newPost/createNewPost/<?php echo $userID.'/'.$username.'?prevURL='.urlencode($prevURL); ?>", 
         data: formData, 
         processData: false, 
         contentType: false, 
         type: 'POST', 
         success:function(msg){ 
          $("#modal-text").html("Your post has been successfully uploaded."); 
          setTimeout(function(){ 
           $("#modal-text").html("Your post will be reviewed and go on live within the next 24 hours."); 
           $('#fwd-btn').css("display", "block"); 
           $('#fwd-btn').css("margin", "auto"); 
           $('#progress-bar').css("display", "none"); 
          }, 2000); 
         } 
        }); 
       } 
       return data; 
      }); 
     } 
    }); 
}