使用 AJAX 值的文件上传未传入表单其他字段

Question

我正在使用 AJAX 文件上传，它应该可以正常工作。我有两个表单字段名字和文件上传。从这个代码文件上传值我可以得到但名字值没有进入下一页（upload.php）而使用 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>    

上传.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

那是因为您的 formData 仅包含添加的 file 字段：

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

您可以使用以下方法添加fname 字段：

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

然后它将使用$_POST['fname'];从php页面发送和访问。

或者您可以将所有表单字段添加到formData：

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

希望这会有所帮助。

Answer 2

试试这个

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

你很亲密;)

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