我需要通过ajax将文件发布到php。我无法做到

Here is my code On clicking browse and select an image, I should get the image details

(function () {

var input = document.getElementById("uploaded_file");




    formdata = false;

alert("s");

    formdata = new FormData();





input.addEventListener("change", function (evt) {alert("AS");




    var i = 0, len = this.files.length, img, reader, file;






    for ( ; i < len; i++ ) {




        file = this.files[i];






            if (formdata) {





                formdata.append("images[]", file);





            }






    }






    if (formdata) {





        $.ajax({





            url: "upload.php",





            type: "POST",





            data: formdata,




            processData: false,





            contentType: false,




            success: function (res) {




                document.getElementById("response").innerHTML = res; 




            }





        });




    }





}, false);

}());

Here an error is getting "Input is null' in mozilla

If In php, I can Take $_FILES...but I need to take in other way itself

Your selected file will be located here

$('input[type="file"]')[0].files[0]

Ajax

$('input[type="file"]').on('change',function(){
    $.ajax({
        type:'POST',
        url:'upload.php',
        data:{file:this.files[0]},
        beforeSend:function(xhr){
            //validation here.
            if(this.files[0].size>5120){
                xhr.abort();
                console.log('file was too large');
            }
        },
        success:function(result){
            console.log(result);
        }
    });
});

Using jQuery selectors and event handlers are easier than using standard javascript ones. But! The above method I've provide will only work with 1.7 and higher. Don't forget to wrap your jQuery functions within a document ready function like below. The below method will work for 1.6.4.

$(document).ready(function(){
    $('input[type="file"]').change(function(){
        $.ajax({
            type:'POST',
            url:'upload.php',
            data:{file:$(this).files[0]},//not sure if 'this' will work within this function
            beforeSend:function(xhr){
                if($(this).files[0].size>5120){
                    xhr.abort();//stops the ajax from executing
                }
            },
            success:function(result){
                console.log(result);
            }
        });
    });      
});

Selector and event listeners are easier to apply to DOM elements using the jQuery library.

$('input[type="file"]').change(function(){/*Ajax here*/});

is a selector with an event listener in jQuery. Similar to that of following:

eles=document.getElementsByTagName('input');
for(i=0;i<ele.length;i++){
    if(ele[i].getAttribute('type')=='file')ele[i].addEventListener('change',function(){/*Ajax here*/},false);
}

Sort of like that. It's probably a lot more complex that what I've written above. More on jQuery selectors.

I can't remember much on formData but I've written something like this before

var data=new formData();
jQuery.each($('input[type="file"]')[0].files,function(i,file){data.append('file-'+i,file);});

This way multiple files are appended to data. I haven't come across a problem so far sending solely files[0]. But there must be a reason I used formData in the past.