当前位置:Gxlcms > JavaScript > JavaScript本地图片预览功能的方法

JavaScript本地图片预览功能的方法

时间:2021-07-01 10:21:17 帮助过:5人阅读

本文主要和大家介绍JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下,希望能帮助到大家。

实现一个在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判断,同时更应该在服务器后台判断,防止用户送些奇奇怪怪的东西到服务器。

相关推荐:

微信小程序图片预览功能的实现代码

nodejs实现图片预览和上传的示例代码

jQuery使用uploadView如何实现图片预览上传功能的实例

以上就是JavaScript本地图片预览功能的方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行