Ajax实现图片上传到服务器

上一篇文章讲解的是，利用form表单的形式将图片发送给服务器，还讲解了如何将图片显示在前端网页，有兴趣可以看一看。将图片从本地上传到服务器的过程详解
那这篇博客就介绍一下，如何利用Ajax技术实现页面无刷新将图片上传到服务器
其实很简单，form表单形式上传图片是设置form表单enctype="multipart/form-data"
而ajax就是监听input的change事件时，获取到文件var file=$(this)[0].files[0];然后新建一个FormData对象，利用FormData的append()方法将file传入***（在这里就相当于form表单提交数据时input的name属性传参）***
具体代码如下

$("#fileupload").change(function() {
    //注意这里不能写错。。。
    var file=$(this)[0].files[0];
    var formData = new FormData();
    formData.append("upload",file);
    //对文件类型进行判断
    var index=file.name.lastIndexOf(".");
    var type=file.name.substring(index);
    if(type!=".jpg"&&type!=".png"){
        alert("只能上传jpg和png格式的图片！！");
        return;
    }
    $.ajax({
        url:"user_UserPicture.action",
        data:formData,
        dataType:"text",
        type:"post",
        //这两个属性必须设置！！！！
        contentType: false,
        processData: false,
        success:function (data) {
            $("#imageview").attr("src","upload/"+data);
        }
    })
});

然后服务器端怎么接收参数，具体框架有具体的做法，可以参考上一篇博客利用Struts2接受图片的做法。
将图片从本地上传到服务器的过程详解