form表单的应用：form对象自带属性和方法及提交时提交的数据.....

1.html中含有form表单

（1）html

<form id="picLoad" class="lt" style="width: 230px;" enctype="multipart/form-data">    <label>        <div class="upload">上传图片</div>        <input id="doc-form-file" onchange="fileChange(this);" type="file" name="file" accept="image/jpeg,image/png" multiple>    </label>    <div>        <img id="imgPreview" src="" width="200"/>    </div></form>

<button onclick="addImage()">提交</button>

（2）js

<script>    function fileChange(file){        console.log(file.files);        var reader = new FileReader();        reader.readAsDataURL(file.files[0]);        reader.onload = function(e){            document.getElementById(‘imgPreview‘).src = e.target.result;        }    }    function addImage(){        var picLoad = document.getElementById(‘picLoad‘);        var formData = new FormData(picLoad);             //根据现有form new一个FormData实例

        console.log(formData);                            //查看实例（这里看不出实例包含了哪些内容）        console.log(formData.getAll("file"));             //获取属性为name为file的值，对应html中的name=‘file‘,file可任意命名

　　　　 var dsc = ‘参数1‘;             formData.append(‘dsc ‘,dsc);                      //为formData添加新值，通常提交到后台的数据既包含文件又包含其他数据时用

       console.log(formData.getAll("dsc"));                //获取属性为dsc的值

    }</script>

点击#doc-form-file选择文件，我选择的是一张图片，选定后自动调用fileChange方法，这个方法的作用是预览图片（FileReader对象这里不做解释，不了解的百度一下）点击提交按钮调用addImage方法

1.html中没有form表单，js中生成表单（1）html

<div id="holder">

</div>

<button onclick="addImage()">提交</button>

（2）js

<script>    var holder = document.getElementById(‘holder‘);

holder.ondragover = function(){         //拖拽图片到#holder 经过#holder时触发

        this.className = ‘over‘;            //图片经过时盒子的样式，可自行设计        return false;                       //阻止元素默认事件//        event.preventDefault()    };

holder.ondrop = function(e){           //一次拖拽事件结束  放开鼠标时触发        this.className = ‘‘;        e.preventDefault();        var files = e.dataTransfer.files; //获取拖拽的内容        console.log(files);        viewHolder(files);    };    function viewHolder(files){             //图片预览        while(holder.hasChildNodes()){            holder.removeChild(holder.firstChild);        }        for(var i=0;i<files.length;i++){            var reader = new FileReader();            reader.readAsDataURL(files[i]);            reader.onload = function(e){                var image = new Image();                image.src = e.target.result;                image.width = 250;                holder.appendChild(image);            }        }    }    function readFiles(files){                       //把拖拽的内容传进来        var formData = new FormData();               //创建FormData实例        for(var i=0;i<files.length;i++){             //把files数组全部加入到实例中（可以拖拽多个文件）

formData.append(‘file‘,files[i])        }

var dsc = ‘参数1‘;        var tel = ‘参数2‘;        formData.append(‘dsc‘,dsc);                 //添加参数        formData.append(‘tel‘,tel);

　　　　　var xhr = new XMLHttpRequest();        xhr.open(‘POST‘,‘/upload‘);        xhr.onload = function(){            location.href = ‘/home‘;        };

        xhr.send(formData);                          /把数据传给后台    }</script>

FormData 的一些方法：https://segmentfault.com/a/1190000006716454   //里面介绍很详细  

创建一个formData对象实例有几种方式1、创建一个空对象实例

var formData = new FormData();2、使用已有的表单来初始化一个对象实例

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上，添加其他数据
formData.append("token","kshdfiwi3rh");.......