javascript - 请教js实现拖拽上传图片的实现思路

Question

页面中有一个区域，将图片拖到此区域上传
想到有两种交互方式
1. 拖进来后先本地预览，不满意的可以删除拖新图片进来，点击“确认上传”后，将图片上传上去
2. 图片拖进来后立即ajax上传

想请教这两种上传的实现思路，会用到哪些api？我需要监听哪些事件呢？谢谢！

Answer 1

根据题主问题的描述，刚好张鑫旭写过一篇《基于HTML5的可预览多图片Ajax上传》的文章！

基于HTML5的可预览多图片Ajax上传

Answer 2

拖放可以用html5的drag

也可以自己写
onmousedown 选择图片，准备拖动
onmousemove 进行拖动，改变图片的位置(left top)
onmouseup 结束拖动

Answer 3

拖拽主要用到两个事件 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上传

javascriptvar 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