zoukankan      html  css  js  c++  java
  • 用AJAX实现上传图片或者文件的方法

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

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

     1     $.ajax({
     2         url: url,
     3         type: 'post/get',
     4         data: {
     5             param1: 'value1',
     6             param2: 'value2'
     7         },
     8         success: function(data) {
     9             console.log(data);
    10         }
    11     })

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

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

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

    想要通过AJAX上传图片,要加几个代码:

    1.在ajax中加上 processData : false,

    2.在ajax中加上 contentType : false,

    3.在ajax中加上 async:false,

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

     1  var formData = new FormData();         // 利用FormData实现图片上传
     2  var img = document.getElementById("id"); //files是原生js,所以我们要获取到type为file的input
     3  var fiObj = img.files[0];             // 用过files获取图片
     4  formData.append('pic',fiObj);         // 给formData用append图片,如果有其他还需要传的参数也一样全部append到formData
     5  $.ajax({
     6    url: url,
     7     type: 'post',
     8     processData : false,
     9     contentType : false,
    10     async:false,
    11     data: formData,          // 主要看这里,就直接把我们实例回来的formData传过去就行了。
    12     success: function(data) {
    13         console.log(data);
    14     }
    15 }) 

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

  • 相关阅读:
    Spring(九)之事件处理
    Spring(八)之基于Java配置
    Spring(七)之基于注解配置
    Spring(六)之自动装配
    Spring(五)之Bean定义继承和依赖注入
    Spring(四)之Bean生命周期、BeanPost处理
    开源 视频会议 收藏
    摄像头拍照录相代码,没摄像头测试,
    什么是ICE (Internet Communications Engine)
    AForge.NET Framework-2.2.5
  • 原文地址:https://www.cnblogs.com/H-csy/p/8300979.html
Copyright © 2011-2022 走看看