php - jquery ajax提交表单上传图片

Question

我正在使用 php 和 jquery ajax 的表单添加一名家庭成员，我的数据已发布，但图像未上传。

我的html表单使用ajax发布数据: (问题出在输入类型文件上)

<form id="form_add_famille" name="form_add_famille" action="modif/add_famille.php" method="POST" enctype="multipart/form-data">
        <h3>Nouveau membre</h3>
        <div style="display: none;">
          <input type="hidden" name="ajouter_famille" value="1">
          <input type="hidden" name="id_user" value="<?php echo $id_user; ?>">
        </div>
        <span class="span5 control-group">
          <label for="famille_nom_1">Nom</label>
          <input class="span5" type="text" id="famille_nom_1" name="famille_nom_1" >
        </span>

        <span class="span5 control-group">
          <label for="famille_prenom_1">Prénom</label>
          <input class="span5" type="text" id="famille_prenom_1" name="famille_prenom_1" >
        </span>

        <span class="span5 control-group">
          <label for="lien_parente">Lien de parenté</label>
          <input class="span5" type="text" id="lien_parente" name="lien_parente">

        </span>

        <span class="span5 control-group">
          <label for="famille_adresse_1">Adresse</label>
          <input class="span5" type="text" id="famille_adresse_1" name="famille_adresse_1" >
        </span>

        <span class="span5 control-group">
          <label for="famille_cp_1">Code postal</label>
          <input class="span5" type="text" id="famille_cp_1" name="famille_cp_1" >
        </span>

        <span class="span5 control-group">
          <label for="famille_ville_1">Ville</label>
          <input class="span5" type="text" id="famille_ville_1" name="famille_ville_1" >
        </span>

        <span class="span5 control-group">
          <label for="famille_telephone_1">Téléphone</label>
          <input class="span5" type="text" id="famille_telephone_1" name="famille_telephone_1" >
        </span>

        <span class="span5 control-group">
          <label for="famille_profession_1">Profession</label>
          <input class="span5" type="text" id="famille_profession_1" name="famille_profession_1" >
        </span>

        <span class="span5 control-group">
          <label for="famille_description_1">Description</label>
          <textarea rows="6" class="span5" id="famille_description_1" name="famille_description_1"><?php echo $row["famille_description_1"]; ?></textarea>
        </span>

        <span class="span5 control-group">
          <label for="famille_photo_1">Photo</label>
  <!--         <input type="text" id="famille_photo_1" value="<?php echo $row["famille_photo_1"]; ?>"> -->   
                <input type="hidden" name="MAX_FILE_SIZE" value="2097152">    
                <input id="famille_photo_1" type="file" name="nom_du_fichier">   
        </span>

        <span class="span10">
          <input type="submit" class="btn btn-primary pull-right" value="Valider" />
        </span>
</form>

我的js:

$(document).ready(function() {
$('#form_add_famille').on('submit', function() {

    var famille_nom_1 = $('#famille_nom_1').val();
    var famille_prenom_1 = $('#famille_prenom_1').val();

    if(famille_nom_1 == '' || famille_prenom_1 == '') {
        alert('Les champs doivent êtres remplis');
    } else {
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(json) {
                if(json.reponse == 'ok') {
                    alert('Tout est bon');
                } else {
                    alert(''+ json.reponse);
                    load_famille();

                }
            }
        });
    }
    return false;
});
});
</script>

我的PHP:

<?php
$host = ;
$user = ;
$pass = ; 
$db = ;
$base_url = ;

$link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
mysql_query("SET NAMES 'utf8'");
mysql_select_db($db) or die ('Erreur :'.mysql_error());

if(isset($_POST['famille_nom_1']) && isset($_POST['famille_prenom_1'])) {
    if(($_POST['famille_nom_1'] != '') && ($_POST['famille_prenom_1'] != '')) {

  $id_user = $_POST["id_user"];
  $nom = $_POST["famille_nom_1"];
  $prenom = $_POST["famille_prenom_1"];
  $lien_parente = $_POST["lien_parente"];
  $adresse = $_POST["famille_adresse_1"];
  $ville = $_POST["famille_ville_1"];
  $tel = $_POST["famille_telephone_1"];
  $travail = $_POST["famille_profession_1"];
  $description = $_POST["famille_description_1"];
  $id_famille = $_POST["id_famille"];
  $photo = "none";


  $select2 = "INSERT INTO Famille(id_user,lien_parente,boolean,id_photo,nom,prenom,adresse,ville,tel,description,travail)     VALUES('$id_user','$lien_parente','1','$photo','$nom','$prenom','$adresse','$ville','$tel','$description','$travail')"; 
  $result = mysql_query($select2,$link) or die ('Erreur : '.mysql_error() );
  $total = mysql_num_rows($result);
  $id_famille = mysql_insert_id();



  /* ----------------------------- */
  /* upload de la photo de famille */
  /* ----------------------------- */

$result_code_perso = mysql_query("SELECT code_perso FROM User WHERE id_user = ".$id_user);
                while ($row_code_p = mysql_fetch_array($result_code_perso, MYSQL_BOTH)) {
                      $code_perso_user = $row_code_p['code_perso'];

                }
            mysql_free_result($result_code_perso);

$nomOrigine = $_FILES['nom_du_fichier']['name'];
$elementsChemin = pathinfo($nomOrigine);
$extensionFichier = $elementsChemin['extension'];
$extensionsAutorisees = array("jpeg", "jpg", "gif", "png");
if (!(in_array($extensionFichier, $extensionsAutorisees))) {
echo "Le fichier n'a pas l'extension attendue";
} else {    
// Copie dans le repertoire du script avec un nom
// incluant l'heure a la seconde pres 
$repertoireDestination = "/var/www/vhosts/plusplus.com/httpdocs/photos/".$id_user."-".$code_perso_user."/famille/";
$nomDestination = "photo_du_".date("YmdHis").".".$extensionFichier;

if (move_uploaded_file($_FILES["nom_du_fichier"]["tmp_name"], 
                                 $repertoireDestination.$nomDestination)) {
} else {
    echo "Le fichier n'a pas été uploadé (trop gros ?) ou ".
            "Le déplacement du fichier temporaire a échoué".
            " vérifiez l'existence du répertoire ".$repertoireDestination;
}
}
$photo_fam=$nomDestination;

$selectphotoupload = "INSERT INTO photo (nom_photo, url_photo) VALUES('$photo_fam','$photo_fam')";
mysql_query($selectphotoupload);

$id_photo = mysql_insert_id();


$insertidphotoupload = "UPDATE Famille SET id_photo = '".$id_photo."' WHERE id_famille =".$id_famille;
  mysql_query($insertidphotoupload);


 $reponse = 'La modification a été effectué avec succes';

} else {
    $reponse = 'Les champs sont vides';
}
} else {
$reponse = 'Tous les champs ne sont pas parvenus';
}


$array['reponse'] = $reponse;
echo json_encode($array);

?>

Answer 1

您可以使用AjaxForm Plugin上传图像以及表单数据。

这里有一小段代码可以帮助您上传图像，但您可以使用 Ajax 表单插件轻松传递其余数据。

http://webomnizz.com/ajax-based-instant-image-upload/