Fileupload mit AJAX-Wert übergibt nicht in Form anderer Felder

Question

Ich benutze AJAX-Datei-Upload, sollte es gut funktionieren.Ich habe zwei Formularfelder Vornamen und Datei-Upload.Von diesem Code-Datei Upload-Wert kann ich aber Vornamen Wert bekommen nicht in der nächsten Seite erhalten (upload.php), während AJAX ...

<form class="form-horizontal form-bordered" method="POST" id="newUserForm" enctype="multipart/form-data"> 
    <div class="form-group"> 
    <label class="col-md-3 control-label">First Name<span class="star_mark">&nbsp;*</span></label> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" id="fname" name="fname" value="" aria-required="true" required="" data-msg-required="Please enter your firstname" placeholder="Enter your firstname"> 

    </div> 
    </div> 

    <div class="form-group"> 
    <label class="col-md-3 control-label">Photo Upload<span class="star_mark">&nbsp;*</span></label> 
    <div class="col-md-6"> 
     <div class="fileupload fileupload-new" data-provides="fileupload"> 
     <div class="input-append"> 
      <div class="uneditable-input"> 
      <i class="fa fa-file fileupload-exists"></i> 
      <span class="fileupload-preview"></span> 
      </div> 
      <span class="btn btn-default btn-file"> 
      <span class="fileupload-exists">Change</span> 
      <span class="fileupload-new">Select file</span> 
      <input type="file" id="file" name="file" value="" aria-required="true" required="" data-msg-required="Please select your file"> 
      </span> 

      <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-6"> 
     <button class="btn btn-info btn-block" type="submit" id="user-submit">Submit</button> 
    </div> 
    </div> 
</form> 
</div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#user-submit").click(function(event){ 
     event.preventDefault(); 

     if($("form#newUserForm").valid()){ 

     // var formData = new FormData($(this)[0]); 
     var formData = new FormData(); 
     formData.append('file', $('input[type=file]')[0].files[0]); 
     $.ajax({ 
      url: 'upload.php', 
      type: 'POST', 
      data: formData, 
      async: false, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data){ 
      alert(data) 
      }, 
     }); 


     return false; 
     }else{ 
     console.log("false"); 
     } 
    }); 
    }); 
</script>  

upload.php

<?php 

$fstname = $_POST['fname'];//here i can't get the first name value 

if (0 < $_FILES['file']['error']) { 
    echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
} 
else { 
    if(move_uploaded_file($_FILES['file']['tmp_name'], 'img/' . $_FILES['file']['name'])){ 
    echo "upload success"; 
    }else{ 
    echo "upload Error"; 
    } 
} 

Answer 1

das weil Ihr formData nur die file Feld enthalten hinzugefügt:

formData.append('file', $('input[type=file]')[0].files[0]); 

Sie fname Feld hinzufügen könnten mit:

formData.append("fname", $('#fname').val()); 

Dann wird es von PHP-Seite mit $_POST['fname']; gesendet und zugänglich wird.

Oder Sie könnten alle Formularfelder der formData hinzufügen:

var formData = new FormData($("form#newUserForm")); 

Hoffnung, das hilft.

Answer 2

versuchen diese

function uploadFile(blobFile, fileName){ 
    var fd = new FormData(); 
    fd.append("fileToUpload", blobFile); 

    $.ajax({ 
    url: "upload.php", 
    type: "POST", 
    data: fd, 
    processData: false, 
    contentType: false, 
    success: function(response){ 
     // .. do something 
    }, 
    error: function(jqXHR, textStatus, errorMessage){ 
     console.log(errorMessage); // Optional 
    } 
    }); 
} 

Answer 3

Sie sind ganz in der Nähe;)

/* pass form reference to populate all inputs expect type="file" */ 
var formData = new FormData($('#newUserForm')[0]); 

/* Then simply append type="file" field(s) */ 
formData.append('file', $('input[type=file]')[0].files[0]);