我尝试使用Jquery表单插件上传图像/多个图像
所有数据都成功插入数据库,但只有图片无效
这是我第一次使用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> 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(' <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';
}
}
答案 0 :(得分:0)
将enctype="multipart/form-data"
属性添加到表单中。