84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
页面中有一个区域,将图片拖到此区域上传 想到有两种交互方式 1. 拖进来后先本地预览,不满意的可以删除拖新图片进来,点击“确认上传”后,将图片上传上去 2. 图片拖进来后立即ajax上传
想请教这两种上传的实现思路,会用到哪些api?我需要监听哪些事件呢?谢谢!
走同样的路,发现不同的人生
根据题主问题的描述,刚好张鑫旭写过一篇《基于HTML5的可预览多图片Ajax上传》的文章!
基于HTML5的可预览多图片Ajax上传
拖放可以用html5的drag
也可以自己写 onmousedown 选择图片,准备拖动 onmousemove 进行拖动,改变图片的位置(left top) onmouseup 结束拖动
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);
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为前面获得的 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
// file为前面获得的 var url = window.URL.createObjectURL(file); var img = new Image; img.src = url; // 加到dom
FormData
不做处理直接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);
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的可预览多图片Ajax上传》的文章!
基于HTML5的可预览多图片Ajax上传
拖放可以用html5的drag
也可以自己写
onmousedown 选择图片,准备拖动
onmousemove 进行拖动,改变图片的位置(left top)
onmouseup 结束拖动
拖拽主要用到两个事件
dragover
drop
预览,主要是文件转换为
base64
,或者blob
,或者canvas
file -> base64
file -> blob
上传 需要用到
FormData
模拟表单数据 或直接form上传不做处理直接ajax上传
如果图片上传前要修改,如对图片进行裁剪,旋转等操作(前端),一般是转化为canvas处理。
随后根据后台可能把canvas转成base64字符串上传或转成blob对象上传,SF上有就不具体写了,可参考:http://segmentfault.com/a/1190000000754560