这是一个简单的实现上传图片的预览功能，兼容chrome和IE，前几天做项目的时候有用到，在这里做个记录。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<p>
<label>请选择一个图像文件：</label>
<input type="file" id="image_file" value="ddd" />
</p>
<div id="result"></div>
<script>
var result = document.getElementById("result");
var input = document.getElementById("image_file");
if(typeof FileReader==='undefined'){
input.attachEvent("onchange",loadImgForIE);
}else{
input.addEventListener('change',readFile,false);
}
function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("文件必须为图片！");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}
function loadImgForIE(){
var imagePath=input.value;
result.innerHTML = '<img src="'+imagePath+'" alt=""/>'
}
</script>
</BODY>
</HTML>
相关推荐
主要为大家详细介绍了如何简单实现JS上传图片预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这种方式虽然也能实现功能，但用户体验上可能会差了一些，所以本文记录了使用css+js实现图片选中后的预览及压缩上传功能，部分带来来源于网络，此处做了记录整理。 效果预览： 1.创建index.html <!DOCTYPE ...
最简单的方法实现javascript图片上传预览功能
//此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){...
本文给大家分享一段js代码关于实现图片上传预览功能，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法： 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { ...
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考，具体如下： 下载DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说，要实现图片预览非常简单： 1、...
主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
一个简单的示例，利用Jquery.form.js+ashx实现图片上传预览功能
主要介绍了vue.js 实现图片本地预览裁剪压缩上传功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
本地选中一张图片，嵌入html的同时会显示图片的本地的绝对路径，然后通过js简单的进行设置，应该就可以实现预览效果了。 但是实际上，目前只有低版本的IE浏览器才能实现这么个效果。究其原因是浏览器厂商为了进一步...
在深圳做项目的时候，需要一个用户上传头像预览的功能！是在网上找了好多，都不太满意。要么是flash的，要么是Ajax上传后返回图片路径的，要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能...
BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件，它支持 支持多文件、在线预览、拖拽上传等功能，封装后BaseFile主要包括以下功能： 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可...
本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体... 您可能感兴趣的文章:.Net Core实现图片文件上传下载功能ASP.NET MVC实现图片上传、图片预览显示asp.net图片文件的上传与删除方法asp.ne
4.图片上传部分：在文件上传部分已有功能的基础上实现了上传前缩略图预览，前台js文件后缀验证，后台代码文件后缀验证和文件类型验证（就算修改后缀名也无法成功上传），支持图片上传前压缩； 5.多选择器多文件上传...
Uploader是非常强大的异步文件上传组件，支持ajax、iframe、flash三套方案，实现浏览器的全兼容，调用非常简单，内置多套主题支持 和常用插件，比如验证、图片预览、进度条等，广泛应用于淘宝网，比如退款系统、...
使用原生JS和HTML实现图片上传预览功能，简单实用，兼容主流浏览器
该系统利用Spring Boot和JavaScript等技术进行开发，实现了文件上传下载、在线预览、权限管理等功能，旨在为用户提供安全、便捷的云端文件管理体验。 以下是个人云盘管理系统的主要功能： 1. **文件上传与管理**：...
上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。