Ajax上传图片及上传前先预览功能实例代码

这里有如下几点需要注意：

1.HTML页面中要引入我们自定义的uploadPreview.js文件

2.预先定义好要显示预览图片的img标签，该标签要有id。

3.查找到img标签然后调用uploadPreview函数

执行效果如下：

Ajax上传图片文件

Ajax上传图片文件就简单了，没有那么多方案，核心代码如下：

 var formData = new FormData();
  formData.append("username", $("#username").val());
  formData.append("file", $("#userface")[0].files[0]);
  $.ajax({
   url: '/fileupload',
   type: 'post',
   data: formData,
   processData: false,
   contentType: false,
   success: function (msg) {
    alert(msg);
   }
  });

核心就是定义一个FormData对象，将要上传的数据包装到这个对象中去。然后在ajax上传数据的时候设置data属性就为formdata，processData属性设置为false，表示jquery不要去处理发送的数据，然后设置contentType属性的值为false，表示不要设置请求头的contentType属性。OK，主要就是设置这三个，设置成功之后，其他的处理就和常规的ajax用法一致了。

后台的处理代码大家可以在文末的案例中下载，这里我就不展示不出来了。

源码下载：http://xiazai.jb51.net/201707/yuanma/AjaxFileUpload.rar

总结

以上所述是小编给大家介绍的Ajax上传图片及上传前先预览功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对易采站长站网站的支持！