前景提示

  1. 在利用FormData上传文件的时候,新建实例化对象如果有参数,需要的是DOM元素,而不是其他的!
  2. FormData的实例化对象调用get()方法获取属性的时候,返回值(FormDataEntryValue)包括下面二种

    1. string数据


    2. ### File对象
    1. File对象当中的属性
    1. lastModified:格林威治时间
    2. lastModifiedDate:可识别时间
    3. name:文件名
    4. size :文件大小(字节)
    5. type:类型
    6. webkitRelativePath(非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！)

    3. ### FormDataEntryValue数组
    1. FormData的实例化对象调用getAll(name)方法返回
    4. ### API测试使用的网站
    1. 果创云
    2. 阿里云OSS存储

代码块

ajax请求使用jQuery插件

html代码块

1
2
3
4
5
<form method="post" enctype="multipart/form-data" id='form'>
    上传文件:
    <input type="file" name="file">
    <input type="button" value="提交" id="ss">
</form>

javascript代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var url =
    "http://hn216.api.yesapi.cn/?s=App.OSS_Aliyun.UploadFile&app_key=填写你自己的";
$("#ss").on('click', function (e) {
    var formData = new FormData(document.getElementById('form'));
    var nameFile = formData.get('file').name;
    //含有文件
    if (nameFile.length != 0) {
        //文件名
        formData.append('object', nameFile);
        //做base64处理
        var reader = new FileReader();
        //从formData当中调用get方法,传入字符串(也就是name属性的值),这里用文件框输入用的name属性为file
        reader.readAsDataURL(formData.get('file'));
        //文件加载完成
        reader.onload = function () {
            //添加文件数据到formData当中
            formData.append('content', reader.result);
            //移除多余的,这一步可有可无
            formData.delete('file'); 
            //ajax发送数据
            $.ajax({
                'url': url,
                'type': 'post',
                'data': formData,
                'processData': false,
                'contentType': false,
                'success': function (data) {
                    console.log(data);
                }
            });

        }
    }
});

执行结果

成功上传

测试过程中遇到的问题

总说缺少content参数但data里面有了

原因

将processData设置为false的时候,表示不将data参数中的数据进行序列化,传输的是blob对象,DOM树,文件等数据的时候就是不需要将传输的数据序列化

解决

将processData设置为true即可,即默认情况下会将发送的数据序列化(也就是data当中的数据,以适应默认的内容类型application/x-www-form-urlencoded

  1. 解决之后传送的数据


2. ##### 解决之前传送的数据

区分下

processData参数在jQuery当中

1
2
3
4
5
6
7
8
9
10
11
12
//测试代码
$.ajax({
    type: "POST",
    url: "some.php",
    data: {
        name: "John",
        location: "Boston"
    },
    success: function (msg) {
        alert("Data Saved: " + msg);
    }
});

  1. 当processData=true;(默认值)

  2. 当processData=false;

总结

  1. processData:本地要怎么样处理当前的数据

    1. processData:true;默认值将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded
    2. processData:false;

  2. contentType:告诉服务器发送数据的格式

    1. contentType:true;默认值,值为application/x-www-form-urlencoded
    2. contentType:false;值为multipart/form-data