السلام عليكم
شكرا اخي العزيز بعدما اضفت هذا السطر بالفعل اظهر اسم الملف اصحيح!
بعدم ما قمت بتعتصيل ملف ال ajax مشي الحال يعني كود ال php سليم 100% ولاكن عندما استخدم ملف ال ajax دائما يظهر لي هذا الخلل
You must select a picture to upload
شو المشكلة؟؟
هذا كود ال php
كود:
<?php
require_once("../includes/connect.php");
$error_list = '';
$name = trim($_POST['name']);
$description = trim($_POST['description']);
//dir for the pictured
$base_path = "../images/categories/";
//the new file
$target_path = $base_path . basename( $_FILES['file']['name']);
if( strlen($name) <= 3) {
$error_list .= '<li>The name must be at least 3 Charecteres in lenght</li>';
}
if( $_FILES['file']['name'] == "" ){
$error_list .= '<li> You must select a picture to upload </li>';
} else if (( ($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg")) && ($_FILES["file"]["size"] < 4194304)){
if ($_FILES["file"]["error"] > 0){
$error_list .= '<li>' . $_FILES["file"]["error"] . '</li>';
} else {
if (file_exists($target_path)){
$error_list .= '<li>The file name "' . $_FILES["file"]["name"] . '" already exists. </li>';
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], $target_path);
$file = $_FILES["file"]["name"];
$cat_sql = mysql_query("SELECT cat_id FROM categories WHERE cat_name = '$name' ");
if(mysql_num_rows($cat_sql) != 0) {
$error_list .= '<li>This name already exists in the database, Please try a different name.</li>';
} else {
//move file to the server
move_uploaded_file($_FILES['file']['tmp_name'], $target_path);
$file = $_FILES['file']['name'];
$cat_insert = mysql_query("INSERT INTO categories (cat_name, cat_descripion, cat_img)VALUES('$name','$description','$file')");
if($cat_insert){
$return['error'] = false;
$return['msg'] = '<p><strong>Done!</strong></p>A new category has been added sucessfully';
} else {
$error_list .= '<li>Error occurred while trying to add category to database</li>';
}
}
}
}
} else {
$error_list .= '<li> The file your are trying to upload is not an image please try again </li>';
}
if(!empty($error_list)){
$return['error'] = true;
$return['msg'] = '<h3>Please correct the following error(s) </h3> <ul>' . $error_list . '</ul>';
}
//print "ERROR: " . $return['error'] . "<br />";
//print "MSG: " . $return['msg'] . "<br />";
echo json_encode($return);
?>
وهذا كود ملف ال jquery و ال ajax
كود:
$(document).ready(function() {
$('form #response').hide();
$('form #name').blur(ValidateInput);
$('form #name').keyup(ValidateInput);
$('form #file').change(checkFile)
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
var valid = '';
var name = $('form #name').val();
// perform error checking
if (name = '' || name.length < 4) {
valid = '<p>Name must be longer than 3 charecters</p>';
$('form #name').addClass('instant_error');
$('form #nameInfo').text("Category name is required");
$('form #nameInfo').addClass("instant_error");
}
// let the user know if there are erros with the form
if (valid != '') {
$('form #response').removeClass().addClass('error')
.html('<strong>Please correct the errors below.</strong>' + valid).fadeIn('fast');
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').text('Processing...').fadeIn('fast');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function checkFile(){
var file = this.files[0],
fileName = file.name,
fileSize = file.size,
type = file.type;
var allowed = [ "image/jpeg", "image/png", "image/jpg", "image/gif" ];
var max = 4194304;
if( fileSize > max){
$('form #fileInfo').removeClass().addClass("instant_error").text("This file is too large! Max allowed size is " + max/1048576 + "MB");
} else if( $.inArray( type, allowed ) == -1 ) {
$('form #fileInfo').removeClass().addClass("instant_error").text("This file type is not allowed!");
} else {
$('form #fileInfo').removeClass().text("");
}
}
function ValidateInput(){
var name = $('form #name');
var nameInfo = $('form #nameInfo');
if (name.val().length == 0){
name.removeClass("instant_error");
nameInfo.html("");
nameInfo.removeClass("instant_error");
return false;
}
if( name.val().length < 4 & name.val().length > 0 ){
name.addClass("instant_error");
nameInfo.text("Minimum 3 charecters in length.");
nameInfo.addClass("instant_error");
return false;
} else {
name.removeClass("instant_error");
nameInfo.html("");
nameInfo.removeClass("instant_error");
return true;
}
}
// make our ajax request to the server
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'check.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data) {
$('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
.html(data.msg).fadeIn('fast');
if ($('form #response').hasClass('success')) {
setTimeout("$('form #response').fadeOut('fast')", 4000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<p>There was an<strong> ' + errorThrown +
'</strong> error due to a<strong> ' + textStatus +
'</strong> condition.</p>').fadeIn('fast');
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
}
});
};
وهذا ملف ال html
كود:
<?php
echo '<form action="check.php" id="formAdd" method="post" enctype="multipart/form-data" >
<table class="general" id="body">
<tr>
<td colspan="3" style="border-width: 0px; background: none; border-style: solid; border-color: #999999;">
<div id="response"></div>
</td>
</tr>
<tr>
<th colspan="3">Add New Category</th>
</tr>';
echo '
<tr>
<td><label for="name">Category Name</lable></td>
<td>
<input type="text" name="name" size="35" id="name" value="" />
<div id="nameInfo"></div>
</td>
</tr>
<tr>
<td><label for="description">Category Description <span style="font-style: italic;">(Optional)</span></label></td>
<td colspan="2"><textarea name="description" colspan="35" row span="5" id="description"></textarea></td>
</tr>
<tr>
<td><label for="file">Attach Picture</label></td>
<td colspan="2">
<div class="file_browse_wrapper">
<input type="file" name="file" class="FileInput" value="" id="file" />
<div id="fileInfo"></div>
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="submit" value="Add Category" id="submit" /></td>
</tr>
</form>
</table>';
?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/category_add.js"></script>
رد مع اقتباس
