<html>
<head>
<title>图片本地预览</title>
<script type='text/javascript'>
function change() {
var pic = document.getElementById("preview");
var file = document.getElementById("f");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
// gif在IE浏览器暂时无法显示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("文件必须为图片！"); return;
}
// IE浏览器
if (document.all) {
file.select();
var reallocalpath = document.selection.createRange().text;
var ie6 = /msie 6/i.test(navigator.userAgent);
// IE6浏览器设置img的src为本地路径可以直接显示图片
if (ie6) pic.src = reallocalpath;
else {
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else{
html5Reader(file);
}
}
function html5Reader(file){
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("preview");
pic.src=this.result;
}
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="form1">
上传文件：<input id="f" type="file" name="f" onchange="change()" />
预览：<img id="preview" alt="" name="pic" />
</form>
</body>
</html>
分享到：
相关推荐
总的来说，本文档为我们提供了一个使用Vue.js结合Element UI实现图片本地预览的有效方案，对于有相关需求的前端开发者来说具有一定的参考价值。通过学习和掌握这些知识点，可以更好地优化我们的Web应用，提高用户...
JavaScript实现图片本地预览功能是前端开发中常见的一项需求，特别是在用户上传图片前需要预览效果的情况下。在本文中，我们将探讨如何通过JavaScript实现在不将图片上传至服务器的情况下进行本地预览，同时兼顾非IE...
综上所述，本文介绍的Vue.js实现图片本地预览、裁剪、压缩和上传功能的知识点覆盖了Vue.js框架基础、图片预览技术、IE浏览器兼容性处理、图片尺寸和大小检测以及图片上传与处理的技术要点。在实现图片处理的过程中，...
以下将详细阐述实现图片本地预览的关键技术和相关知识点。 1. HTML5 File API： 文件API是HTML5的一项重要特性，它为JavaScript提供了读取、操作和处理本地文件的能力。在这个场景下，FileReader接口是关键，它...
本文将详细介绍如何利用tinyMCE结合jQuery和AJAX技术实现在本地预览图片的功能。 #### 二、技术原理与实现步骤 ##### 2.1 技术原理 1. **jQuery**：这是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件...
- HTML5 File API：这是实现图片预览的基础，通过`<input type="file">`元素让用户选择文件，并利用FileReader接口读取文件内容，使用`readAsDataURL()`方法将图片转换为Base64编码的URL，然后显示在`<img>`标签中...
在JSP（JavaServer Pages）中，显示本地图片预览是一项常见的需求，特别是在网页开发中。JSP是一种基于Java的动态网页技术，它允许开发者在HTML、XML或其他标记语言中嵌入Java代码，以实现服务器端的数据处理和动态...
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
在现代Web开发中，用户...总的来说，通过`URL.createObjectURL()`，我们可以方便地在用户选择图片后实现本地预览，提升上传图片的功能体验。结合其他前端技术，如Ajax异步上传，可以构建出更高效、友好的图片上传系统。
在实现图片预览功能时，`QGraphicsView` 和 `QGraphicsScene` 是两个核心组件。`QGraphicsView` 用于显示图形场景，而 `QGraphicsScene` 则是图形对象的容器，可以包含各种图像、文本等元素。我们可以通过`addPixmap...
总结来说，实现"上传图片本地预览效果"需要利用HTML5的File API，通过监听文件选择事件，读取文件内容并转化为DataURL，最后在页面上展示。同时，为了提供良好的用户体验和安全性，还需要进行相应的优化和保护措施。...
本篇文章将详细探讨使用JavaScript实现本地预览图片的关键知识点。 首先，我们要理解JavaScript在其中的角色。JavaScript是一种广泛用于Web开发的脚本语言，它可以在用户的浏览器上运行，无需服务器参与。对于本地...
这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目，是基于Vue 2.5.2版本实现的，它专注于为PC端用户提供图片预览和下载功能，但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...
本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能，结合jQuery库来增强前端交互。 首先，我们要理解JSP（JavaServer Pages）是Java的一种动态网页技术，它允许在服务器端嵌入Java代码，使得网页具有更强...
在IT领域，尤其是在Web开发中，用户界面的交互性至关重要，而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片，提高了上传过程的可控性和便捷性...
这个html文件用html5实现了本地图片上传，在上传服务器前回显预览的功能
//最近在研究creator html5开发，喜欢交流的加扣扣群427719099，各种资源各种技术应有尽有
但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。 例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和...
虽然本地预览提供了良好的用户体验，但需要注意安全问题。Base64编码的图片数据可能会暴露用户硬盘上的敏感信息。因此，确保只预览用户预期上传的图片，避免其他文件类型的滥用。 5. **性能优化**： 对于大尺寸...