摘要：实现方法如下创建对象基于每块文件读取完毕之后的处理计算的之前做的一个活动页面，上传照片测气质，只在本地操作图片，并根据值返回唯一结果
需求场景：需要用户上传一张照片，返回给用户一个唯一的结果，比如测试类网页你拥有哪种女人气质？（移动端）
其实这种需求（不需要保存图片）的话，只需要在本地处理图片即可，不需要将图片上传到服务器。计算图片的md5值可以确保唯一性。
针对这个需求，可以使用HTML5 file api来读取文件。实现方法如下：
document.getElementById("file").addEventListener("change", function() {
var fileReader = new FileReader(), box = document.getElementById("box"),
//创建md5对象（基于SparkMD5）
spark = new SparkMD5();
//每块文件读取完毕之后的处理
fileReader.onload = function(e) {
console.log("finished loading");
$("#box").append("![]()
");
console.info("计算的Hash", spark.end());
};
});
demo:
http://jsbin.com/zoputihuqe/edit?html,css,js,output
JS Bin on jsbin.com
之前做的一个活动页面，上传照片测气质，只在本地操作图片，并根据MD5值返回唯一结果：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79810.html
摘要：以上传图片为例。我们可以通过获取上传的图片相关信息，但是想要实现本地预览还需要借助来实现可以读取本地图片，并将图片数据转换成编码的字符串形式嵌入到页面中。在我们实现上传图片的效果里，就有用到。图片预览兼容处理及以下版本不支持和。 最近项目里需要用到上传图片并预览的功能，于是写了个jQuery预览图片插件，下载地址。如果有需要的，可以直接下载。第一次写jQuery插件，如有不对之处，欢迎...
阅读 1562·2019-08-30 13:18
阅读 1547·2019-08-29 12:19
阅读 2075·2019-08-26 13:57
阅读 4106·2019-08-26 13:22
阅读 1163·2019-08-26 10:35
阅读 2969·2019-08-23 18:09
阅读 2481·2019-08-23 17:19
阅读 662·2019-08-23 17:18
