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 = http://www.mamicode.com/e.target.result;
        }
    }
    function addImage(){
        var picLoad = document.getElementById(‘picLoad‘);
        var formData = http://www.mamicode.com/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 = http://www.mamicode.com/e.target.result;
                image.width = 250;
                holder.appendChild(image);
            }
        }
    }
    function readFiles(files){                       //把拖拽的内容传进来
        var formData = http://www.mamicode.com/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 = http://www.mamicode.com/‘/home‘;
        };

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


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

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

var formData =http://www.mamicode.com/ new FormData();
2、使用已有的表单来初始化一个对象实例

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

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

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