如何在jquery中获取表单文件字段以上传图像

Question

I have below html

This form allows you to upload a file to the server.<br>
        <div class="imguploadpath" style="width:100%;height:200px;background-color:#CCC;">
          <form name="myFormName" id ="myFormId" action="" method="post">
             <input type="file" name="img" id = "image_pe">
             <br/><br/><br/><br/>
             <input id="cmdSubmit" value="Submit" type="submit" class="">
          </form>
        </div>

I am trying to get the file field values to upload the file in php using below script

jQuery( "#cmdSubmit" ).on( "click", function() {
   var file = jQuery('#image_pe').val(); 

//i have to send file property to php file in jquery ajax

 $.ajax({
            url: 'submit.php?files',
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function(data, textStatus, jqXHR)
            {
                if(typeof data.error === 'undefined')
                {
                    // Success so call function to process the form
                    submitForm(event, data);
                }
                else
                {
                    // Handle errors here
                    console.log('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                // Handle errors here
                console.log('ERRORS: ' + textStatus);
                // STOP LOADING SPINNER
            }
        });
       return false;

    });

but var file only return some temp path c://fakepath/image.jpg

how do upload in jquery and php, I need to pass the form field in php file, I know value() jquery function is wrong.

what is the correct way to do it ?

for php file upload i was thinking of using this script http://www.tizag.com/phpT/fileupload.php

Answer 1

Try this: JQuery:

var formdata = new FormData();
            jQuery.each($('#image_pe')[0].files, function(i, file) {
             formdata.append('image_pe', file);
            });


            $.ajax({
                url: "/my.php",
                data : formdata,
                dataType : "json",
                type : "post",
                cache: false,
                contentType: false,
                processData: false,
                success: function(data){

                },
                failure: function(){
                    $(this).addClass("error");
                }
            });
            return false;

PHP Code:

$file = $_FILES['image_pe'];