<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script src="https://www.jb51.net/img-previewer.js"></script> </head> <body> <input type="file" multiple onchange="preview()"> <div> </div> <script> function preview(){ var config = { tip: "请上传格式为png, gif或者jpg的图片", fileId: "file", containerId: "container", imgStyle: "width:320px;height:auto;border-radius:64%;" } var previewer = new ImgPrevirewer(config); previewer.preview(); } </script> </body> </html>
测试
为了保证这个组件的稳定性，接下来来个简单的测试。
首先是在Chrome浏览器上，发现可以正常工作。
接下来是在Edge浏览器上的测试。（发现样式不兼容）
不出所料，IE系的浏览器样式都没能兼容。
最终发现，Chrome等WebKit内核的浏览器可以完美支持，对于微软系浏览器而言，功能可以满足，但是样式上不兼容，这点可以通过特定的浏览器头来实现，不再过多叙述。
总结
总的来说，关于图片上传时的预览功能，实用性还是很强的。对于一个网站可以算是一个加分项。当然了，该网站有一个设计感不错的美工或者前端，不像我做出的页面好难看(⊙﹏⊙)b。
大概就是这样咯，有需要的尽管拿去使用。