上传文件
HTML5新增了文件API,提供客户端本地操作文件的可能.
我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.
file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.
可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’
<form action="#"><div class="form-group"><label for="input_1">请选择文件</label><input id="input_1" class="form-control" name="input_1" type="file"></div><div class="form-group"><button id="btn_1" class="btn btn-default" type="button">读取文件信息</button></div></form><pre id="result"></pre></div><script>var btn = document.querySelector('#btn_1');var input = document.querySelector('#input_1');btn.addEventListener('click', function() {// 获取文件域中选择的文件// var file = input.files[0];var file = input.files.item(0);if (file) {result.innerHTML ='文件名：' + file.name + '\n文件最近修改时间：' + file.lastModifiedDate+ '\n文件类型：' + file.type + '\n文件大小：' + file.size + '字节'} else {result.innerHTML = '没有选择任何文件';}});</script>
页面拖拽操作
对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程
dragstart 拖拽开始drag 正在拖拽dragend 拖拽结束
<body><div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div><div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div></body><script type="text/javascript">two.ondragstart = function(e){// e.preventDefault();console.log(e);e.dataTransfer.setData("Text",e.target.id);console.log(e.dataTransfer.getData("Text",e.target.id));one.innerHTML = '开始'}two.ondrag = function(e){one.innerHTML += '拖动中'}two.ondragend = function(e){one.innerHTML = '结束'}</script>
想要拖拽元素,必须设置draggable属性
页面默认的动作是拖拽后回到原位
在拖动阶段，我们可以存储被拖动元素的属性或者状态到事件对象的dataTransfer中，如果出现跳转，则是浏览器默认的事件被触发，我们需要使用e.preventDefault()来阻止默认事件。
投放区的事件
对于被拖的元素而言，拖向何处则为投放区，投放区的事件如下：
dragenter 被拖放元素进入dragover 被拖放元素移动dragleave 被拖放元素离开
<body><div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div><div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div></body><script type="text/javascript">one.ondragenter = function(e){// e.preventDefault();console.log(e);one.innerHTML = '开始'}one.ondragover = function(e){one.innerHTML += '拖动中'}one.ondragleave = function(e){one.innerHTML = '结束'}</script>
而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件，他可以接收到dataTransfer中的数据，所以我们的页面内拖拽可以写成如下效果：
<style type="text/css">*{box-sizing: border-box;}</style><body><div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div><div id="two" style="width: 100px;height: 100px;border: 1px solid blue;display: flex;"><div style="width: 50px;height: 100px;border:1px solid black;">第一个</div><div style="width: 50px;height: 100px;border:1px solid pink;">第二个</div></div></body><script type="text/javascript">one.ondragover = function(e) {e.preventDefault();}two.onmousedown = function(e){e.target.draggable = true;e.target.ondragstart = function(ev) {ev.dataTransfer.setData("Text", ev.target.innerHTML);}e.target.ondragend = function(){two.removeChild(this)}}one.ondrop = function(e) {var div = document.createElement('div')div.style = "width: 50px;height: 100px;border:1px solid black;"div.innerHTML = e.dataTransfer.getData("Text")this.appendChild(div)}</script>
对于谷歌浏览器，e.dataTransfer.setData(key,value)会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要，我们可以屏蔽它对于火狐浏览器，没有e.dataTransfer.setData(key，value)还不行。我们可以直接设置键值对为null，"";最新版本的谷歌和火狐浏览器没有发现问题drop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.
拖拽文件上传
经过观察，事件对象中的dataTransfer也存在files属性，我们可以用熟悉的方法上传拖拽进来的文件：
<body><div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div></body><script type="text/javascript">one.ondragover = function(e) {e.preventDefault();}one.ondrop = function(e) {e.preventDefault()console.log(e.dataTransfer.files[0]);}</script>
然后做Ajax文件上传即可
one.ondrop = function(e) {e.preventDefault()var file = e.dataTransfer.files[0];var formData = new FormData();formData.append("aa", file);var xml = new XMLHttpRequest();xml.open("post", url, false);xml.send(formData);}
