页面中有一个区域,将图片拖到此区域上传
想到有两种交互方式
1. 拖进来后先本地预览,不满意的可以删除拖新图片进来,点击“确认上传”后,将图片上传上去
2. 图片拖进来后立即ajax上传
想请教这两种上传的实现思路,会用到哪些api?我需要监听哪些事件呢?谢谢!
页面中有一个区域,将图片拖到此区域上传
想到有两种交互方式
1. 拖进来后先本地预览,不满意的可以删除拖新图片进来,点击“确认上传”后,将图片上传上去
2. 图片拖进来后立即ajax上传
想请教这两种上传的实现思路,会用到哪些api?我需要监听哪些事件呢?谢谢!
dragover
drop
javascript
// box为被拖放的区域 box.addEventListener('dragover', function (e) { e.preventDefault(); // 必须阻止默认事件 }, flase); box.addEventListener('drop', function (e) { e.preventDefault(); // 阻止默认事件 var file = e.dataTransfer.files[0]; //获取文件 // code }, false);
base64
,或者blob
,或者canvas
file -> base64
javascript
// file为前面获得的 var reader = new FileReader(); reader.onload = function(e) { var img = new Image; img.src = this.result; // this.result 为base64 // 加到dom }; reader.readAsDataURL(file);
file -> blob
javascript
// file为前面获得的 var url = window.URL.createObjectURL(file); var img = new Image; img.src = url; // 加到dom
FormData
模拟表单数据 或直接form上传不做处理直接ajax上传
javascript
var xhr = new XMLHttpRequest, fd = new FormData; xhr.open('POST', 'url', true); // 'url' //可以通过progress事件监听上传进度 xhr.onload = function() { // 上传完成 } // fd.append('file', file); // 'file' xhr.send(fd);
如果图片上传前要修改,如对图片进行裁剪,旋转等操作(前端),一般是转化为canvas处理。
随后根据后台可能把canvas转成base64字符串上传或转成blob对象上传,SF上有就不具体写了,可参考:http://segmentfault.com/a/1190000000754560
拖放可以用html5的drag
也可以自己写
onmousedown 选择图片,准备拖动
onmousemove 进行拖动,改变图片的位置(left top)
onmouseup 结束拖动
27 回答13.1k 阅读
8 回答3.5k 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
3 回答1.7k 阅读
4 回答2.3k 阅读✓ 已解决
根据题主问题的描述,刚好张鑫旭写过一篇《基于HTML5的可预览多图片Ajax上传》的文章!
基于HTML5的可预览多图片Ajax上传