时间:2021-07-01 10:21:17 帮助过:6人阅读
本文实例讲述了JavaScript实现图片本地预览功能。分享给大家供大家参考,具体如下:
实现一个在file文件域中选定图片文件之后,马上进行预览。不用预上传到服务器,整缩略图再打回前端用Ajax去预览的。直接利用JavaScript即可以完成,而且还可以兼容IE6。具体效果,如下图所示:
具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现。具体代码如下:
首先在preview这个放图片预览的p中生成一个id=imghead的p。
非IE部分,用HTML5直接可以读取用户选择的文件,通过function clacImgZoomParam(maxWidth, maxHeight, width, height)计算出预览图片的大小,之后直接可以将这张图片放到id=imghead这个p中。如果是IE,生成的id=imghead的p会被赋予在style标签设置好的滤镜,通过滤镜将用户选择的图片文件加载上去,再用clacImgZoomParam函数求其大小,得到大小之后,清除preview中的所有内容,正式生成被赋予图片滤镜,其大小确定的p上去。
在<input type="file">文件域也用到accept="image/*"
这个HTML5功能用来限制用户只能选择图片文件,但是,在提交表单的时候,还应该通过onSubmit判断,同时更应该在服务器后台判断,防止用户送些奇奇怪怪的东西到服务器。
以上就是JavaScript图片本地预览功能的实现方法的详细内容,更多请关注Gxl网其它相关文章!