javascript - Codeigniter 表单验证

Question

下面有以下 html 代码，它将把图像从客户端上传到我的 php apache 服务器。后端，我使用了 codeigniter 表单验证。但是，使用下面的代码后，用户的图像无法上传到我的服务器。如果我评论 form_open(......)代码<?php $prevURLPATH=urlencode($prevURL); echo form_open('newPost/createNewPost/'.$userID.'/'.$username.'?prevURL='.$prevURLPATH); ?> ，我的表单实际上有效(这些图像已成功发布)，但当然它是在没有 codeigniter 验证的情况下完成的。那里，是否可以同时发布图像并使用 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;
            });
        }
    });
}

Answer 1

事实上，

我在提交按钮中有下面的 jquery javascript 函数，它将使用 URL 来进行表单提交。怎么改呢？

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;
            });
        }
    });
}