用AJAX实现上传图片或者文件的方法

大家好，我是小C，最近在项目中用到ajax上传图片文件，本篇我们就说说ajax上传文件。

我们平时用到的AJAX，大部分都是传几个参数就可以了。简单说就是传几个字符串。

     $.ajax({

         url: url,

         type: 'post/get',

         data: {

             param1: 'value1',

             param2: 'value2'

         },

         success: function(data) {

             console.log(data);

         }

     })

上面这代码就是平常我们比较常用到的ajax写法；

但是如果我们要上传图片或者文件呢？难道我们还是传一下字符串就行了吗？

当你给后台传图片时，你传的是一个文件而不再是普通的string类型的值。而是file类型，也就是文件类型

想要通过AJAX上传图片，要加几个代码：

1.在ajax中加上 processData : false,

2.在ajax中加上 contentType : false,

3.在ajax中加上 async:false,

4.主要是改变ajax中的data这个属性：请看下面的完整代码

  var formData = new FormData();     　　　　// 利用FormData实现图片上传

  var img = document.getElementById("id"); //files是原生js，所以我们要获取到type为file的input

  var fiObj = img.files[0];       　　　　　 // 用过files获取图片

 4  formData.append('pic',fiObj);    　　　　　// 给formData用append图片，如果有其他还需要传的参数也一样全部append到formData

  $.ajax({

  　　url: url,

     type: 'post',

     processData : false,

     contentType : false,

     async:false,

     data: formData,    　　　　　　// 主要看这里，就直接把我们实例回来的formData传过去就行了。

     success: function(data) {

         console.log(data);

     }

 })

有不足的地方，请多多指教。

巴特西

用AJAX实现上传图片或者文件的方法

最新文章

热门文章