Javascript之图片上传预览

使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器。

关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来生成本地图片预览图的。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0;" name="viewport" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById(‘preview‘);
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;
}
}
</script>
</body>

时间: 2024-10-05 23:36:49

Javascript之图片上传预览的相关文章

【JavaScript】图片上传预览

上传文件实时显示[一张图片]: 个人理解:给img的src传值:这个值就是input[type='file']的value: 不过你要判断浏览器类型[很多]:IE6.0,IE7/8/9,Fixfox7.0以下,Firefox7.0+ ,Chrome..... 直接贴代码[网上找的,记不得是哪位大神写的了] function PreviewImage(obj, imgPreviewId, divPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.p

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

js:s上次预览,上传图片预览,图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

多图片上传预览功能

//下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length;

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д`)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&

图片上传-预览

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript实现图片上传本地预览图片的代码-php自学网</title> <script type="text/javascript"> function checkFiles(str, ex