FormData实现上传多图片,学习使用FormData

FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。

今天我们使用dropzone和FormData实现多文件上传功能。

var SAMP = null;        //Dropzone对象

      SAMP = new Dropzone("#dropzone",
    {
              url: "#",  //后台响应的链接
              maxFiles: 4,    //最大可以传输的文件数量  目前我们设定为1
              maxFilesize: 2048, //文件大小的限制
              acceptedFiles: ".png,.jpg,.gif,.jpeg,.bmp", // 文件格式的限制
              autoProcessQueue:false,  //文件是否自动传回到后台
              myAwesomeDropzone:false,
    })

  我们设置文件不自动上传,而通过控件按钮实现上传功能。首先我们创建一个Dropzone对象,设置上传的最大文件数量,文件大小等。

  var myFormData = new FormData()

  创建Form Data对象

 SAMP.on("addedfile", function(file) {
    myFormData.append(file.name, file)
 })

  给Dropzone对象注册addedfile事件,当上传文件时,FormData对象的append()函数是以键值对的方式向myFormData成对成对的增添图片对象。

$.ajax({
       type:'POST',   url:"/upload-img/",        data:myFormData, processData: false,//*必须写 contentType: false,//*必须写
       success:function(data){
             ...
        },
      error:function(XMLHttpRequest, textStatus, errorThrown){
            ...
         }
});

  在使用FormData对象通过Ajax向后台传数据时,必须在选项中设置"processData: false,contentType: false,"两项,否则会报错。

  processData设置为false。因为data值是FormData对象,不需要对数据做处理。

  contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js中使用FormData可以实现多文件上传。下面是一个简单的示例代码: 首先,需要引入相关的模块: ``` const http = require('http'); const fs = require('fs'); const FormData = require('form-data'); ``` 然后,创建一个FormData对象,用于存储要上传的文件: ``` const formData = new FormData(); ``` 接下来,可以通过append方法向FormData对象中添加上传的文件: ``` formData.append('file1', fs.createReadStream('path/to/file1.txt')); formData.append('file2', fs.createReadStream('path/to/file2.txt')); ``` 然后,创建一个请求对象: ``` const options = { hostname: 'localhost', port: 8000, path: '/upload', method: 'POST', headers: formData.getHeaders() }; const req = http.request(options, (res) => { // 处理服务器的响应 }); // 将FormData对象写入请求体 formData.pipe(req); req.on('error', (err) => { console.error(err); }); req.end(); ``` 最后,需要在服务器端接收并处理文件上传的请求。可以使用`multer`模块来处理文件上传: ``` const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.array('file', 2), (req, res) => { console.log(req.files); res.status(200).send('File uploaded successfully'); }); app.listen(8000, () => { console.log('Server started on port 8000'); }); ``` 上面的示例代码为使用Express框架,当有文件上传请求时,会将文件保存到`uploads/`目录下,并打印上传的文件信息到控制台。 这就是使用Node.js中的FormData实现多文件上传的简单示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值