使用 FormData 上传图片

　　上传头像时，因为仅仅需要图片信息，因为没有必要在页面上使用 <form></form>,因此，找了下资料，

　　发现FormData 可以使用和表单一样的格式。

什么是FormData？

　　提供了一种表示表单数据的键值对的构造方式。

创建实例

　　1、创建空对象实例

　　　　var formData = new FormData();

　　2、使用表单初始化对象实例

　　　　var formInstance = document.getElementById('formId');

　　　　var formData = new FormData(formInstance);

操作方法

　　 因为FormData里存储的数据形式，是一对key/value 组成的数据，因此可以使用get(key)获取响应的value值。

　　  1、获取值

　　　　 formData.get('name')

　　　　 formData.getAll('name')

　　  2、添加数据

　　　　 formData.append('name','jack')

　　　　 formData.append('name','tom')  // 允许一个key含有多个value,不会被覆盖

             formData.append('age','18')

　　  3、修改数据

　　　　 formData.set('name','tom') // 如果一个key对应多个value,则会变成 one key,one value

　　  4、是否包含某数据

　　　　 formData.has('name')

　　  5、删除数据

　　　　formData.delete('name')

　　  6、遍历

            var itemList = formData.entries();

　　　　let item = itemList.next();

            while(!item.done) {

                  console.log(item); // ['name','jack']   ['age','18']

　　　　　　// 数组下标0 为 key, 下标1 为value 

　　　　　　// 如果一个key值对应多个value,则会变成多对key/value   

　　　　　　item = item.next();

　　　　}

 

　　  5、发送数据　　　 

      var xhr = new XMLHttpRequest();
　　　 xhr.open('post','/focus');
      xhr.send(formData);

 

　　      发送的Content-Type 默认是 multipart/from-data

　　　　当然也可以使用  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

　整个上传图片的代码如下

　　 

<div>
    <img id="img" style="width: 200px; height: 200px;">
    渲染
    <input id='file' onchange="upload()" type="file" accept="image/gif, image/jpeg, image/png,image/jpg">
</div>
<script type="text/javascript">
    function upload () {
        let fileStream = document.getElementById('file');
        let img = document.getElementById('img');
        let fileReader = new FileReader();

        if(fileStream.files.length===0){
            return;
        }

        let detailFile = fileStream.files[0];
        fileReader.readAsDataURL(detailFile);

        fileReader.onloadend = (value)=>{
            img.src = fileReader.result;
            sendData(detailFile);
        }

        fileReader.onprogress = (value)=>{
            console.log(value)
        }
    }

    function sendData(detailFile){
        let formData = new FormData();
        formData.append('name','jack');
        formData.append('file',detailFile);
        var xhr = new XMLHttpRequest();

        xhr.open('post','/focus');
        xhr.send(formData);
    }
    
</script>