从FormData到图片上传

栏目: jQuery · 发布时间: 6年前

内容简介：FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。之前一直用jquery的form插件自带的方法ajaxSubmit提交表单。这种方法太依赖库，在移动端会产生多大的资源消耗，于是还是用FormData提交比较合适。FormData也是

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

之前一直用jquery的form插件自带的方法ajaxSubmit提交表单。

$('#myForm2').submit(function() {
   $(this).ajaxSubmit(function() {   
      $('#output2').html("提交成功！欢迎下次再来！").show();    
   });
   return false; //阻止表单默认提交
});
复制代码

这种方法太依赖库，在移动端会产生多大的资源消耗，于是还是用FormData提交比较合适。FormData也是H5新增

==FormData可以添加由用户选择的HTML 文件类型input，也可以添加JavaScript file-like 对象== 还可以直接向FormData对象附加File或Blob类型的文件，如下所示：

data.append("myfile", myBlob, "filename.txt");
复制代码

一、通过Html元素创建FormData对象

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<form action="">
	<label for="">
		姓名: <input type="text" name="name">
	</label>
	<label for="">
		文件：<input id="file" type="file" name="file">
	</label>
	<label for="">
		<input type="button" value="保存">
	</label>
	<div class="progress"></div>
</form>
<script>
	var btn = document.querySelector('[type=button]');
	var progress = document.querySelector('.progress')
	btn.onclick = function () {
		// 文件元素
		var file = document.querySelector('[type=file]');
		// 通过FormData将文件转成二进制数据
		var formData = new FormData();
		// 将文件转二进制
		formData.append('upload', file.files[0]);

		// JavaScript file-like 对象
		var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
		var blob = new Blob([content], { type: "text/xml"});
		formData.append("webmasterfile", blob);

		var xhr = new XMLHttpRequest;
		xhr.open('post', './file.php');
		// 监听上传进度
		xhr.upload.onprogress = function (ev) {
			// 事件对象
			// console.log(ev);

			var percent = (ev.loaded / ev.total) * 100 + '%';

			console.log(percent);

			progress.style.width = percent;
		}

		xhr.send(formData);

		xhr.onreadystatechange = function () {
			if(xhr.readyState == 4 && xhr.status == 200) {
				//
			}
		}
	}
</script>
</body>
复制代码

二、通过Html Form元素创建FormData对象，用ajax提交。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo">
    <label>Your email address:</label>
    <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32"
           maxlength="64"/><br/>
    <label>Custom file label:</label>
    <input type="text" name="filelabel" size="12" maxlength="32"/><br/>
    <label>File to stash:</label>
    <input type="file" name="file" required/>
    <input type="submit" value="Stash the file!"/>
</form>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
    var form = document.forms.namedItem("fileinfo");
    form.addEventListener('submit', function (ev) {
        ev.preventDefault()
        // 文件元素
        var fd = new FormData(document.querySelector("form"));
        fd.append("CustomField", "This is some extra data");
        $.ajax({
            url: "./file.php",
            type: "POST",
            data: fd,
            processData: false,  // 不处理数据
            contentType: false   // 不设置内容类型
        });
    })
</script>
</body>
复制代码

请求头为：Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryVXQzCH5gOtjud1Xu

“——WebKitFormBoundary”加16位随机Base64位编码的字符串作为分隔边界

三、使用antd-mobile的ImagePicker + fetch上传

import { ImagePicker, WingBlank, SegmentedControl } from 'antd-mobile';
const data = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}, {
  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  id: '2122',
}];

export default class ImagePickerExample extends React.Component {
  state = {
    files: data,
    multiple: false,
  }
  onImageChange = (files, type, index) => {
    if (type == 'add') {
      var file = files[files.length - 1].file

      let formData = new FormData();
      formData.append("file", file);

      files[files.length - 1].url = '../../../../src/white.png'
      this.setState({files})

      fetch('./file.php', {
        method: 'POST',
        headers: {},
        body: formData,
      }).then((response) => response.json()).then((res)=> {
          if (res.code == 200) {
            files[files.length - 1].url = res.value.fileUrl
          }
          this.setState({files},function () {
            const dom = document.querySelectorAll('.am-image-picker-item')
            dom[files.length - 1].className +=' now'
          });
      }).catch((err)=> {
        util.showWarning(err)
      });
    } else {
      this.setState({files});
    }
  }
  render() {
    const { files } = this.state;
    return (
      <div>
        <ImagePicker
          files={files}
          onChange={this.onImageChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 3}
          multiple={false}
        />
      </div>
    );
  }
}
复制代码

onImageChange files 值发生变化触发的回调函数, operationType 操作类型有添加，移除，如果是移除操作，则第三个参数代表的是移除图片的索引

判断type== 'add'时就上传图片，因为设置的是单个上传，所以files数组最后一个数据就是新添加需要上传的file

var file = files[files.length - 1].file
复制代码

使用FormData将数据封装

let formData = new FormData();
formData.append("file", file);
复制代码

因为上传需要时间，为了增强用户体验，先将地址替换成一张透明png图片展位，显示loading

files[files.length - 1].url = '../../../../src/white.png'
  this.setState({files})
复制代码

注意在使用fetch方法时，不用设置header,body上直接传封装后的formData

fetch('./file.php', {
    method: 'POST',
    headers: {},
    body: formData,
  })
复制代码

原生的移动端上传参考大神的方法： segmentfault.com/a/119000001…

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Haskell趣学指南

[斯洛文尼亚] Miran Lipovaca / 李亚舟、宋方睿 / 人民邮电出版社 / 2014-1

《haskell趣学指南》是一本讲解haskell这门函数式编程语言的入门指南，语言通俗易懂，插图生动幽默，示例短小清晰，结构安排合理。书中从haskell的基础知识讲起，涵盖了所有的基本概念和语法，内容涉及基本语法、递归、类型和类型类、函子、applicative 函子、monad、zipper及所有haskell重要特性和强大功能。《haskell趣学指南》适合对函数式编程及haske......一起来看看《Haskell趣学指南》这本书的介绍吧!

码农工具