使用预览将图像上载到服务器

Question

so I have this code to upload an image and show it's preview. It also allows you to upload multiple images and show it's preview.

However, how can I actually push this image to server now? I've tried this but it doesnt seems to be working.

HTML

<input type="file" name="albumPics" id="albumPics" style="display:none;" multiple="multiple" />

javascript

window.onload = function(){

    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("albumPics");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("albumPicsPreview");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];
                alert(file);
                //Only pics
                if(!file.type.match('image'))
                  continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var liContent = "<li><img style='height: 195px;' src='" + picFile.result + "'" + "title='" + picFile.name + "'/></li>";
                    $("#albumPicsPreview").prepend(liContent);
                    // output.html(div);          
                    // upload the image
                    $.ajax({
                    type: "POST",
                    url: "pettyURL.php",
                    data:  file,
                    enctype: 'multipart/form-data',
                    processData: false,  // tell jQuery not to process the data
                    contentType: false,   // tell jQuery not to set contentType
                    dataType: "json",
                    success: function(response)
                    {
                        // some code after succes from php
                        console.log("success");
                    },
                    beforeSend: function()
                    {
                        // some code before request send if required like LOADING....
                    }
                });

                }); //event listener

                 //Read the image
                picReader.readAsDataURL(file);
            }                               

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

The ajax doesn't work here. It seems no data goes to the PHP file. How can I make it work?