FormData h5实现多图上传的方式--FormData

最新推荐文章于 2024-05-17 04:46:42 发布

baby加油_

最新推荐文章于 2024-05-17 04:46:42 发布

阅读量2.7k

点赞数 3

分类专栏： js APP与H5 文章标签： formData h5多图上传

本文链接：https://blog.csdn.net/qq_34664239/article/details/94563419

版权

js 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

APP与H5

15 篇文章 1 订阅

订阅专栏

FormData 是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件!
有了这个对象，对图片的添加，删除，上传问题迎刃而解！！！

一、创建FormData对象

1.直接创建

var formData = new FormData();

2.通过现有的表单form创建new FormData(_form)

<body>
    <form id="form"  action="" method="post">
        <input type="text" name="username" value="hahaha">
    </form>
    <script>
        var _form = document.getElementById('form');
        var formData = new FormData(_form);
        var name = formData.get("username"); //hahaha
        var name = formData.getAll("username"); //["hahaha"]
    </script>
</body>

二、FormData的方法

获取值 – get和getAll

formData.get("username"); //获取到的是一个值
formData.getAll("username"); 获取到的是数组

添加值 – append和set

append和set的差别
append添加一个name的value值后，再添加则添加到数据的末尾。
而set再添加会修改此name的value值
formData.append(name, value,[ filename]);

name
- value中包含的数据对应的表单名称name。
value
- 表单的值。可以是USVString 或 Blob (包括子类型，如 File)。
filename 可选
- 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。

var formData = new FormData();
formData.append('upload_file', file);
formData.set('upload_file', file);

append同一个值多次时，可以用getAll来获取添加的所有数据组成的数组
例子,可直接复制，浏览：

<input type="file" id="imgfile" name="pic" multiple>
<script>
 $("#imgfile").change(function () {
     var data = new FormData();
     $.each($('#imgfile')[0].files, function (i, file) {
         console.log(file);
         data.append('upload_file', file);
         // data.set('upload_file', file);
     });
     console.log(data.get('upload_file'));
     console.log(data.getAll('upload_file'));
 });
</script>

修改值 – set

formData.set(name, value,[ filename]);
set既是添加值，也是修改值，没有此name的时候是添加，有此name的时候是修改

判断是否存在 – has

formData.has(name);

删除值 – delete

formData.delete(name);

三、多图上传的方法

将formData对象传给后台

//processData: false, contentType: false,多用来处理异步上传二进制文件。
$.ajax({
    url: 'xxx',
    type: 'POST',
    data: formData,                    // 上传formdata封装的数据
    dataType: 'JSON',
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: false,                // jQuery不要去设置Content-Type请求头
    success:function (data) {           //成功回调
        console.log(data);
    }
});

添加formData文件的方式
1.multiple file添加图片

<input type="file" id="imgfile" name="pic" multiple>

$("#imgfile").change(function () {
   var formData = new FormData();
   $.each($('#imgfile')[0].files, function (i, file) {
     console.log(file);
     // formData.append('upload_file', file);
     formData.set('upload_file'+ i, file);
   });
});

2.单独添加

<body>
    <input type="file"  id="imgfile1" >
    <input type="file"  id="imgfile2" >
    <input type="file"  id="imgfile3" >

    <button id="upload">多图上传按钮</button>
    <script>
        document.getElementById('upload').onclick = function(){
            var formData = new FormData();
            var file1 = document.getElementById('imgfile1').files[0];
            var file2 = document.getElementById('imgfile2').files[0];
            var file3 = document.getElementById('imgfile3').files[0];
            formData.append('upload_file1',file1);
            formData.append('upload_file2',file2);
            formData.append('upload_file3',file3);
            console.log(formData.get('upload_file1'))
        }
    </script>
</body>

具体的添加方式，还是看页面展示需求，以及后台怎么能获取到的方式！

baby加油_

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
FormData h5实现多图上传的方式--FormData

FormData 是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件!一、创建FormData对象1.直接创建var formData = new FormData();2.通过现有的表单form创建...
复制链接

扫一扫

专栏目录