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

Question

这是我的代码单击浏览并选择图片后，我应该获取图片详细信息

（函数（）{

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




    formdata = false;

警报（ “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);

}（））;

这里的错误是在mozilla中出现“输入为空”

如果在php中，我可以使用$ _FILES ...但是我需要采用其他方式

Answer 1

您选择的文件将位于此处

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

阿贾克斯

$('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);
        }
    });
});

使用jQuery选择器和事件处理程序比使用标准javascript选择器和事件处理程序容易。 但！ 我提供的上述方法仅适用于1.7及更高版本。 不要忘记将jQuery函数包装在如下所示的文档就绪函数中。 以下方法适用于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);
            }
        });
    });      
});

使用jQuery库，选择器和事件侦听器更易于应用于DOM元素。

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

是jQuery中带有事件监听器的选择器。 与以下类似：

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);
}

有点像。 这可能比我上面写的要复杂得多。 有关jQuery选择器的更多信息。

我不太记得formData但是我之前写过类似的东西

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

这样，会将多个文件附加到data 。 到目前为止，我还没有遇到过仅发送files[0] 。 但是一定有一个原因我过去使用过formData 。