由于在通过post向服务器上传时采用了同步的方式，所以我在写项目的过程中，老是无法实现加载中的动画效果，并且把加载中的动画效果放在 reader.onloadstart方法中依旧不起作用，最后只能放在了$("#upload").change(function (e) {})方法中，代码如下：
event: function () { $("#upload").change(function (e) { $(".loading").show(); file.upload(e); }); }
以上是同时上传多张图片并将图片传入下一个页面继续进行后续操作，那么如何在同时上传完多张图片后在本页再预览这些图片呢？其实方法也是很简单的，上边callback函数里边的$.post的返回值里就包含了上传至服务器后的图片路径，将这些路径赋给img标签的src，然后再插入到页面中就OK了，代码如下：
callback: function (dataURL) { $.post(url, dataURL, function (res) { //将base64图片流的图片通过后台转换成普通的图片路径并上传至服务器 if (res.success) { $(".loading").hide(); var result = '<div><img src="'https://www.jb51.net/+res.imgUrl+'" alt=""/></div>'; var div = document.createElement('div'); div.innerHTML = result; document.body.appendChild(div); } else { alert(res.message); } }, "json"); }
以上在预览图片时由于不需要跳转，不需要传入返回的所有图片的路径作为参数，所以也就不需要将ajax的异步设置为同步了。
以上所述是小编给大家介绍的JS移动端/H5同时选择多张图片上传并使用canvas压缩图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: