无法使用 Jquery 表单插件通过 php 上传图片

Question

我尝试使用 Jquery 表单插件通过 PHP 上传图片/多张图片

所有数据都已成功插入数据库，但只有图像不起作用

这是我第一次使用 jquery.form.js 插件

这是我的 HTML 代码

<form method="POST" action="data/addtrip.php" class="form-horizontal form-groups-bordered">
    <div class="col-md-12">

        <div class="panel panel-gradient" data-collapsed="0">

            <div class="panel-heading">
                <div class="panel-title">
                    Trip information
                </div>

                <div class="panel-options">
                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                </div>
            </div>

            <div class="panel-body">

                    <div class="form-group">
                        <label for="title" class="col-sm-3 control-label">Trip Name</label>

                        <div class="col-sm-5">
                            <input type="text" class="form-control input-lg" name="title" placeholder="Trip Name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="category" class="col-sm-3 control-label">Category</label>
                        <div class="col-sm-5">
                            <select class="form-control" id="category" name="category" required>
                                <option></option>
                                <?php foreach($categorys as $cat):?>
                                <option value="<?echo $cat['id'];?>"><?echo $cat['title'];?></option>
                                <?php endforeach;?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="price" class="col-sm-3 control-label">Trip Price</label>

                        <div class="col-sm-5">
                            <input type="text" class="form-control input-lg" name="price" placeholder="Trip Name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="details" class="col-sm-3 control-label">Information</label>

                        <div class="col-sm-5">
                            <textarea class="form-control autogrow" name="details" placeholder="Trip Details"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="images" class="col-sm-3 control-label">Multiple files</label>

                        <div class="col-sm-5">

                            <input type="file" class="form-control file2 inline btn btn-primary" name="images" multiple="multiple" data-label="<i class='glyphicon glyphicon-circle-arrow-up'></i> &nbsp;Browse Files">

                        </div>
                    </div>


                    <button type="submit" name="insert" class="btn btn-lg btn-info submit">Add trip</button>

            </div>

        </div>
    </div>

</form>

这是我的 Jquery

$(document).ready(function(){


    $(document).ready(function() {
        $('form').ajaxForm( function(data) {

            var thisform = $(this);



            if($.trim(data) == 'Please check all fields'){
                $('.alert').hide();
                $(thisform).before('<div class="alert alert-danger">'+ data +'<i class="fa fa-2x fa-times pull-left"></i></div>');
                $('html, body').animate({scrollTop : 0},300);
            } else {
                $('.btn i').hide();
                $('form .btn').append('&nbsp;&nbsp;<i class="fa fa-spin fa-refresh"></i>');


                setTimeout( function() {

                  $('.alert').hide();
                  $(thisform).before('<div class="alert alert-success">'+ data +'<i class="fa fa-2x fa-check pull-left"></i></div>');
                  $('html, body').animate({scrollTop : 0},300);

                }, 1500 );


                setTimeout(function() {
                      location.reload();

                }, 3000 );

            }


        });
    });

});

这是我的 php 代码

if(isset($_POST)){
  $title    = $_POST['title'];
  $category = $_POST['category'];
  $details  = $_POST['details'];
  $price    = $_POST['price'];
  $date     = date('Y-m-d');

  // Execute database query
  $insert = insert_trip($title, $category, $details, $price, $date);

  if(!empty($_FILES['images']['name'])) {

      $lastid  = last_trip();
    foreach($_FILES['images']['tmp_name'] as $key => $tmp_name ){
        $file_name = $_FILES['images']['name'][$key];
        $file_tmp  =$_FILES['images']['tmp_name'][$key];
        $file_type =$_FILES['images']['type'][$key];



          $desired_dir="../../includes/trip_images/";
          if(is_dir($desired_dir)==false){
              mkdir("$desired_dir", 0700);      // Create directory if it does not exist
          }
          $image_name = rand().$file_name;
          move_uploaded_file($file_tmp,"../../includes/trip_images/".$image_name);
          insert_trip_images($lastid['id'], $image_name);
      }

  }

  if(!empty($insert)) {

    echo 'Your Trip is succesfully add !';

  } else {

    echo 'Please check all fields';

  }

}

Answer 1

将enctype="multipart/form-data" 属性添加到您的表单中。