`
netskys
  • 浏览: 48645 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

js 图片预览 (不经过后台交互)

 
阅读更多
最近 在搞图片上传,上传前总是要预览下吧,考虑经过后台交互后将临时文件下载预览又未免太麻烦,自然就想写个纯前台的js预览,大概查询了下资料最后得出如下结论

测试地址 :[url]http://zucou.com/preview/ [/url] 


1 ie 6版本下的 直接img src  给予 file.value  即可显示图片

2 ie 7++  由于ms 安全性要求 不支持 直接显示  所以 我们采用 css中的 滤镜 做一个 遮罩

3 firefox 4 以下的版本 支持  getAsDataURL () 方法 这个方法 将 img的全路径 读取出来 然后 放到 img 的src 下 

4 firefox 4++ 后 也是考虑安全问题 将 getAsDataURL 方法 删除了(安全永远是问题) 所以 新版浏览器 在通常的 js 技术下 都不支持 预览 很多就选择了 上传服务器

5 chrome 的横空出世 未曾给我们带来 js 对 文件(尤其图片)的美好支持,其实如果js 读文件很好支持的话 确实太危险了。。。

6 由于 ff 4++ 和chorme 等都支持 html5 那么 自然 就支持 html5中的 fileReader 对象了 ,此对象 有方法 可以将 图片读取并且 进行 base64编码 那么自然 就ok了

7 增加图片格式验证 以及根据需要 等比例压缩图片
分享到:
评论

相关推荐

    无需后台交互的上传预览JS插件Demo

    在这个场景下,"无需后台交互的上传预览JS插件Demo"提供了一种解决方案,它允许用户在选择文件后即时预览,而不需要等待服务器的反馈。这个Demo主要依赖于JavaScript的File API,这是一种现代浏览器提供的本地文件...

    后台管理界面图片预览框带查看和删除操作

    本主题聚焦于后台管理界面中的一个特定功能——图片预览框,它带有查看和删除操作,这对于内容管理和用户体验至关重要。 图片预览框是后台管理界面的一个关键组件,它允许管理员直观地检查和管理上传的图片资源。这...

    jQuery H5移动端图片预览插件

    在这个背景下,"jQuery H5移动端图片预览插件"应运而生,它旨在解决移动端图片预览的问题,为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计,它能够无缝地集成到你的H5...

    同时上传文件和相应的数据,实现前后台交互

    在IT行业中,前后台交互是实现用户界面与服务器端数据处理功能的重要环节。"同时上传文件和相应的数据"是常见的用户操作,例如在社交媒体上发布包含文字描述和图片的帖子,或者在云存储服务中上传文档并添加元信息。...

    js图片浏览

    【JS图片浏览】是一种利用JavaScript实现的网页图片预览技术,它可以为用户提供便捷的图片预览体验,尤其在用户上传图片或浏览大量图片时。这种技术通常涉及到HTML、CSS和JavaScript的结合应用,以实现动态加载、...

    flash+js可预览图片批量上传

    在这个解决方案中,Flash作为前端交互层,用于处理图片预览和多文件选择,而JavaScript则用于提供页面动态交互和用户反馈。后端则通常采用ASP.NET这样的服务器端技术,处理文件的实际上传和存储。 首先,我们需要...

    jquery图片预览与裁剪

    在IT行业中,图片预览和裁剪是网页开发中常见的功能,尤其在用户需要上传图片时,这样的功能显得尤为重要。"jQuery图片预览与裁剪"是一个针对多种浏览器实现的解决方案,包括火狐、IE6至9、谷歌以及世界之窗等主流...

    图片上传,html页面,本地预览,后台前台页面代码都有

    前端页面通常使用HTML配合JavaScript(JS)来实现用户交互。在图片上传的功能中,HTML可以创建一个表单,包含一个`<input>`标签,类型为`file`,让用户选择本地图片。例如: ```html *" onchange="previewImage...

    图片裁剪前后台台js/java

    1. 图片预览与加载:在用户选择图片后,前端需要展示一个预览图。这通常通过HTML5的FileReader API实现,读取文件并用DataURL显示图片。`FileReader.readAsDataURL(file)`用于读取文件内容,完成后会触发`onload`...

    JS验证图片格式 有预览功能

    5. **图片预览**:为了提供预览功能,我们可以使用FileReader API的`readAsDataURL`方法将文件读取为数据URL。这个URL可以直接用作`<img>`标签的`src`属性,显示图片预览。当`load`事件触发时,表示读取完成,此时...

    一个灵活的图片上传插件支持预览和异步上传图片并且不依赖jQuery等js库

    本插件名为"tinyImgUpload",其核心特性在于支持图片预览和异步上传,并且不依赖于jQuery或其他大型JavaScript库,这使得它在性能和轻量化方面具有显著优势。 1. **异步上传**:异步上传技术是现代Web应用中的重要...

    相册带后台ASP+JS版

    在"相册带后台ASP+JS版"中,JavaScript主要用于前端的页面动态加载和用户交互,例如图片预览、拖放上传、分页显示等。通过AJAX(Asynchronous JavaScript and XML)技术,JavaScript可以无刷新地与服务器通信,提高...

    适用于各浏览器支持图片预览,无刷新异步批量上传js插件

    在这个场景下,我们关注的是一个专门设计用于图片预览和无刷新异步批量上传的JavaScript插件。这种插件对于提高用户体验,尤其是在处理大量图片上传时,显得尤为重要。 首先,让我们深入了解一下“图片预览”功能。...

    多图片上传带图片预览功能

    在IT领域,多图片上传和图片预览功能是网页应用中常见的需求,尤其在社交媒体、电商网站和内容管理系统中。这个ASP程序提供了这样的功能,允许用户在上传多张图片前进行预览,提高了用户体验和交互性。下面我们将...

    VS2010+js 上传图片预览并保存

    总结来说,"VS2010+js 上传图片预览并保存"是一个综合了客户端JavaScript交互和服务器端C#处理的Web应用实例,它展示了如何使用现代Web技术实现用户友好的图片上传功能。通过JavaScript的FileReader API实现图片预览...

    图片不用上传直接预览

    总结来说,图片预览技术涉及客户端和服务器端的交互,利用现代Web技术如`URL.createObjectURL()`、FileReader API、WebP格式以及Canvas等,可以实现高效、安全的图片预览功能。这些技术的应用大大提升了用户在浏览、...

    AJAX+PHP+JQ图片预览截取上传

    AJAX的核心是利用JavaScript在后台与服务器进行异步数据交换,使得用户在不刷新整个页面的情况下,可以更新部分网页内容。在这个场景中,AJAX用于在用户选择图片后,无需离开当前页面就能发送图片数据到服务器进行...

    微信小程序-图片展示(完整带后台)小程序源码

    同时,wx.previewImage接口可用于实现图片预览,用户可以左右滑动查看多张图片。 在项目中,README.md文件通常包含项目介绍、安装步骤、使用教程、贡献指南等内容,对于开发者来说非常重要,因为它能快速引导你理解...

    flex图片上传功能,包括图片预览

    3. `AC_OETags.js`:这是一个Adobe的JavaScript库,常用于与Flash交互,可能在这个案例中用于处理文件选择和上传的JavaScript部分。 4. `KunLunUpFile.swf`:这是一个Flex编译的SWF文件,是实际执行图片上传和预览...

    JavaScript图片上传预览效果

    随着互联网技术的发展与用户交互体验需求的提升,图片预览功能成为了许多网站及应用不可或缺的一部分。在本篇文章中,我们将详细介绍一种基于JavaScript实现的图片上传预览效果,旨在为用户提供更好的视觉反馈,同时...

Global site tag (gtag.js) - Google Analytics