`

js本地图片上传预览

阅读更多

IE6: 

Java代码  收藏代码
  1. //img: image object  
  2. //file: file inputbox object  
  3. img.src = file.value;  


IE7-8: 
Java代码  收藏代码
  1. var src = '';  
  2. file.select();  
  3. try {  
  4.     src = document.selection.createRange().text;  
  5. finally {  
  6.     document.selection.empty();  
  7. }  
  8. src = src.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });  
  9. img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + src + "\")";  


Firefox 6以下: 
Java代码  收藏代码
  1. img.src = file.files[0].getAsDataURL();  


Firefox 3.6 (1.9.2)+,Chrome 7+,IE10+,Opera 11.1+,Safari Nightly build: 
Java代码  收藏代码
  1. var oFile = file.files[0];  
  2. var oFReader = new FileReader();  
  3. oFReader.onload = function (oFREvent) {  
  4.     img.src = oFREvent.target.result;  
  5. };  
  6. oFReader.readAsDataURL(oFile);  


IE9:不能用IE8的方法,也不支持FileReader,http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info 里的FileAPI也不能用,需要进一步调查。 

参考文档: 
https://developer.mozilla.org/en/DOM/FileReader 
分享到:
评论

相关推荐

    js读取本地图片进行预览,上传服务器

    在JavaScript中,本地图片的预览和上传到服务器是一个常见的需求,特别是在Web应用中,比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能,提供了源码和工具来帮助开发者轻松实现这一过程。...

    图片上传本地预览插件

    这个插件的核心作用是让用户在实际上传图片到服务器之前,能够在本地环境中预览图片效果,确保图片的质量和格式符合要求。下面我们将详细探讨这个插件涉及的关键知识点。 1. 图片预览技术: - HTML5 File API:这...

    cupload本地图片上传预览插件

    【cupload本地图片上传预览插件】是一个专为前端开发者设计的实用工具,它使得在网页中实现本地图片的上传和预览功能变得更加简单。这个插件是前端开发中的重要组成部分,尤其对于那些需要用户交互式上传图片的网站...

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在图片上传中,JS通常用于处理用户选择文件后在本地预览图片,验证文件类型和大小,以及提供一个友好的用户体验,如进度条显示上传进度。 1. **图片预览**:使用HTML5的FileReader API,开发者可以读取用户选择的...

    jsp 本地图片上传前的预览

    整个工程"test.jsp"的实现将这些部分结合在一起,为用户提供了一个友好的本地图片上传预览功能。在这个过程中,我们利用了HTML5的特性,如文件API和data URL,以及jQuery的便利性,实现了前后端的协同工作。这个项目...

    详解nodejs实现本地上传图片并预览功能(express4.0+)

    写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...

    本地图片预览 html+js

    本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览

    Jquery 表单验证+本地图片上传-切割-预览

    在本项目中,"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例,它涵盖了几个重要的JavaScript库和技术,包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释:...

    jquery 本地上传图片预览Demo

    在本文中,我们将深入探讨如何使用jQuery实现本地图片上传预览功能,这是一项常见的Web开发需求,尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互...

    本地图片上传即时预览

    标题中的“本地图片上传即时预览”是一个常见的前端开发功能,尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果,无需等待图片实际上传到服务器。...

    javascript图片上传预览

    在JavaScript中实现图片上传预览是一项常见的前端功能,它允许用户在正式上传图片到服务器之前先看到图片的效果,提供了一种良好的用户体验。这个过程通常包括选择图片、读取图片数据、处理图片(如尺寸调整)以及在...

    js图片上传预览

    在JavaScript中实现图片上传预览是一项常见的前端功能,它允许用户在正式上传之前查看选定的图片,提升用户体验。这项技术主要涉及到HTML、CSS以及JavaScript,尤其是利用File API和Canvas元素来实现。以下是对这一...

    JavaScript 图片上传预览效果

    图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。 不过群众的智慧是...

    PHP上传图片带预览功能

    以上代码实现了基本的图片上传和预览功能,但实际应用中可能还需要考虑其他方面,例如错误处理、文件名冲突、安全检查(防止恶意文件上传)、图像尺寸调整等。你可以根据项目需求进一步扩展这些功能,例如通过GD库或...

    图片上传及预览+时间水印

    首先,图片上传是网页或应用程序允许用户将本地图片上传到服务器的过程。这个过程涉及到前端的用户界面设计,以便用户选择文件,以及后端的处理逻辑来接收和存储这些文件。在前端,可以使用HTML5的`...

    js上传图片预览

    `readAsDataURL`方法将文件内容转化为Data URL,然后在`onload`事件回调中,将这个URL设置为图片元素的`src`属性,从而实现在页面上预览图片。 此外,还可以添加额外的功能,比如限制上传文件的大小和类型,或者...

    支持批量上传、JS图片预览的前端上传组件

    【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域,尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求,同时提供了图片预览功能,...

    html5+js本地图片预览

    在这个“html5+js本地图片预览”的主题中,我们将深入探讨如何利用HTML5的File API和JavaScript来实现在用户选择图片后即时预览,以及鼠标悬停时展示大图的效果。 1. **File API**:HTML5的File API允许开发者在...

    .net批量上传图片带预览功能

    这通常通过JavaScript或jQuery来实现,将本地图片数据转换为Base64编码的字符串,然后在页面上动态创建一个img标签显示。在HTML5中,FileReader API提供了readAsDataURL方法,可以读取文件内容并转换为data URL,...

    html5图片上传本地生成缩略图预览

    5. **显示预览**:将生成的Data URL赋值给img标签的src属性,显示预览图片。 6. **处理上传**:用户确认预览无误后,可以将原始文件或缩略图数据URL发送到服务器进行存储或进一步处理。 需要注意的是,这个过程...

Global site tag (gtag.js) - Google Analytics