jquery ajax提交表单上传图片

Question

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

我使用 ajax 发布数据的 html 表单： （问题出在输入类型文件上）

<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/

Answer 2

将您所有的$_FILES['nom_du_fichier'] 更改为$_FILES['famille_photo_1']，它可能会起作用，因为您的文件输入名称是famille_photo_1

Answer 3

您可以使用 iframe 并像这样提交
将您的 HTML 更改为：

<iframe name="form_add_famille_iframe" style="border:0;width:0;height:0;display:none;"></iframe>
<form target="form_add_famille_iframe" id="form_add_famille" name="form_add_famille" action="modif/add_famille.php" method="POST" enctype="multipart/form-data">

您的Javascript 至：

<script type="text/javascript">
  $(document).ready(function() {
    $("[id^='form_famille']").on('submit', function(e) {
      e.preventDefault();
      var clicked_id  = $(this).data('idval');
      var nom = $('#famille_nom_1').val();
      var prenom  = $('#famille_prenom_1').val();

      if ( nom == '' || prenom == '' ) {
        alert( 'Les champs doivent êtres remplis' );
        return false;
      }
      $(this).off("submit").submit();
    });
  });
  function handle_response( json ) {
    json  = $.parseJSON( json );
    if ( json.reponse == 'ok') {
      alert( 'Tout est bon' );
    }
    else {
      alert( ''+json.reponse );
    }
  }
</script>

和PHP 到：

<?php
  echo 'window.top.window.handle_response('.json_encode( $array ).');';
?>