js上传文件-没有文件上传

Question

I am uploading an image file on server-side and my script give an error

error: "No files were uploaded."

<form enctype="multipart/form-data" method="post">
  <input name="file" type="file"/>
  <input class="btn btn-warning" type="button" value="Upload"/>
</form>

JS code

$(':button').click(function () {
    var formData = new FormData($('form'));
    $.ajax({
        url: "/files/create",
        type: 'POST',
        success: completeHandler,
        data: formData,
        cache: false,
        contentType: false,
        processData: false

    });
    console.log(formData);
});

function completeHandler() {
    console.log("complete success");
}

Have anyone an idea? With what it can be connected?

Answer 1

Try this:

//HTML Part

<form enctype="multipart/form-data" method="post">
    <input name="file" type="file"/>
    <input class="btn btn-warning" type="submit" value="Upload"/>
</form>

//Js part
<script>
$('form').submit(function (e) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
       url: '/files/create',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
    });
    return false;
});

</script>

php part in your create.php

<?php
    if(isset($_FILES['file'])){
      print_r($_FILES);
    }
?>