使用AJAX值的文件上传未通过其他字段传递

Question

I am using AJAX file upload,it should be working fine.i have two form fields firstname and file upload.from this code file upload value i can get but first name value not getting in next page(upload.php) while using 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

try this

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 2

That because your formData contain just the file field added in :

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

You could add fname field using :

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

Then it will be sent and accessible from php page using $_POST['fname']; .

Or you could add all the form fields to the formData :

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

Hope this helps.

Answer 3

You are very close ;)

/* 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]);