使用Ajax在单个表单上上传文件和表单数据

Question

I have a html form with 2 input filed and a file upload form and i want to send these data to some index.php file using ajax what i did so far is

<form class="col-md-3" id="form" name="reg" method="post" action="index.php" enctype="multipart/form-data">
  <label>Name</label>
  <input type="text" name="name" class="form-control" id="name">
  <label>Address</label>
  <input type="text" name="address" class="form-control">
  <div id="sugg">

  </div>
  <input type="file" name="file">
  <input type="button" name="submit" class="btn-default" id="btn" value="submit">
</form>

jquery for send data using ajax is

$("#btn").click(function() {
  $.ajax({
    url: "index.php",
    type: "POST",
    data: new FormData($('form')[0]),
    cache: false,
    conentType: false,
    processData: false,
    success: function(result) {
      console.log(result);
    }
  });

});

php file has just this

echo $_POST["name"];

but in my browser window i am undefined index

I found similar questions but all that doesn't solved my problem that's why i asking your help please help me to find my error

Answer 1

I am create below code according to my need and you can make changes according to your requirement:

when you click upload/select file button use this function :

$('input[type=file]').on('change', function(e){
        e.preventDefault();
        $this = $(this);
        if($this.prop("files")){
            if(setImagestoUpload(e, $this.prop("files"), $this.attr("name"))){
                var reader = new FileReader();
                reader.onload = function(e){
                    $('.brandLogo img').attr("src", e.target.result);

                    $this.parent().prev("img.imageSelection").attr("src", e.target.result);

                };
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
function setImagestoUpload(e, $file, name){
        e.preventDefault();
        var type = [];
        var isSize = [];

        $($file).each(function(i, v){
            type[i] = isImage(v);
            isSize[i] = isValidSize(2, v.size);
        });
        if($.inArray(false, type) === -1){
            if($.inArray(false, isSize) === -1){
                /*if(checkTotalFileInputs() > 1 && files.length>0){
                    $.each($file, function(ind, val){
                        files[name] = val;
                    });
                    files[name] = $file[0];
                }else{
                    files = $file;
                }*/
                formData.append(name, $file[0]);
                console.log(files);
                return true;
            }else{
                alert("Error: Upload max size limit 2MB");
            }
        }else{
            alert("Please select only image file format to upload !");
            return false;
        }
    }
function isImage(file){
    var type = file.type.split("/");
    if(type[0] === "image"){
        return true;
    }else{
        return false;
    }
}

and when you submit form then use below function:

function fileAndFormSubmit(ev, $this, get, options){

        var defaults = {
            redirect : false,
            redirectTo : "#",
            redirectAfter : 5000
        };
        var settings = $.extend({}, defaults, options);
        removeErrorAndSuccess();
        var $form = $($this).parent('form');
        /*var formData = new FormData();
        if(files.length > 0){
            $.each(files, function(key, val){
                formData.append(key, val);
            });
        }*/
        var doc = {
            data : $form.serialize()
        };

        formData.append("doc", doc.data);

        /*Call to ajax here*/
    }