需求场景:须要用户上传一张照片,返回给用户一个唯一的效果,比方测试类网页你具有哪一种女人气质?(挪动端)
实在这类需求(不须要保留图片)的话,只须要在当地处置惩罚图片即可,不须要将图片上传到服务器。盘算图片的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('<img src="'+e.target.result+'">');
console.info("盘算的Hash", spark.end());
};
});
demo:
http://jsbin.com/zoputihuqe/edit?html,css,js,output
JS Bin on jsbin.com<script src=”” target=”_blank”>http://static.jsbin.com/js/embed.min.js?3.36.10″></script>
之前做的一个运动页面,上传照片测气质,只在当地操纵图片,并依据MD5值返回唯一效果: