哈哈哈今天和一个90后小哥学了一个缩略图的东东。。。。js搞定的。。。。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 FileReader</title> </head> <body> <center> <input type="file" id="file" οnchange="readAsDataURL()"> <div id="thumb"></div> <script type="text/javascript"> // 判断浏览器是否支持 FileReader if (typeof FileReader == 'undefined') { console.error('你的浏览器不支持FileReader属性'); } var selector = document.getElementById('file'); // 将文件读取为DataURL function readAsDataURL() { var file = selector.files[0]; // 检测是否为图片类型 if (!/image\/\w+/.test(file.type)) { console.error('选择的文件不是图片'); return false; } var reader = new FileReader(); // 注意，readAsDataURL 读取文件是没有返回值的 reader.readAsDataURL(file); // 文件读取完毕执行 reader.onload = function (data) { // 获取到文件路径 var data_url = data.currentTarget.result; document.getElementById('thumb').innerHTML='<img src="'+data_url+'" width="100px" height="180px">'; } } </script> </center> </body> </html> 小哥的博客网址为这个https://www.zrong.me/archives/139.html 。。。。
