在开发过程中,我最近碰到个问题,就是拖拽上传附件。其实最简单的方法就是利用FormData实现上传,(具体可以查看https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects),这里我说的是换一种思路实现的方法,就是利用submit()。
html:
<iframe name="" id="iframeId" style="display: none;"></iframe>'+ <form action="/public_upload/multi" id="" method="post" target="iframeId" enctype="multipart/form-data" > <input type="file" id="" name="upfile" hidden multiple="multiple" style="cursor:pointer;" /> </form>
js
var dz = document.getElementById('dragAndDropBox'); dz.ondragover = function (ev) { ev.preventDefault(); }; dz.ondragleave = function () { }; dz.ondrop = function (ev) { ev.preventDefault();//阻止浏览器打开图片 var files = ev.dataTransfer.files; if (files.length > 1){ // layer.alert('只支持一张张图片拖拽上传!'); layer.msg('只支持一张张图片拖拽上传!', {time:1500,shade:0.6,icon: 2,shadeClose:true}); return false; } var fr = new FileReader(); var f = files[0]; fr.readAsDataURL(f); fr.onload = function () { var data = this.result; if (data){ $('#dragAndDrop_file').val(data); $('#dragAndDrop_from').submit(); } }; }