方法1、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>get file input full path</title>
<script language='javascript'>
function getFullPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file" onchange="document.getElementById('img').src=getFullPath(this);" />
<img id="img"width="230" height="210" />
</body>
</html>
方法2、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
最近项目中用到的图片上传前预览功能,兼容IE6-9,FF
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "300px";
localImagId.style.height = "300px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
相关推荐
js实现图片上传预览功能,自己稍微加工了一下,这个在IE9上面挺有意思的,alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30,第二次之后就会显示图片的实际大小,具体原理不懂,有明白的...
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...
纯javascript实现上传图片前图片预览,判断图片大小,兼容ie-7到10 firefox chrome,非常不错,分享给大家。
通过Js限制上传文件格式和限制文件大小
代码片段: *{ margin:0;padding:0; } html,body{ font-family:Arial,Helvetica,sans-serif; } li{ list-style: none; } img{ border:none;display: block } .box{ width: 1024px;...
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器。 第一种使用uploadify异步上传,上传后返回图片路径显示到页面。 每二种使用ajaxSubmit异步上传,为兼容IE8,dataType使用text...
此功能可实现图片上传,删除,显示缩略图,点击放大,自定义上传图片数量等;使用了JS和JAVA及MYSQL
类似于各大网站上的会员头像上传功能。 实现解决方案: 1.在前台生成本地图片的预览。 2.用js对图片进行缩放显示、打水印。 3.当用户选取图片当中的一部分时,记录选取框大小以及坐标。 4.当用户点击保存时,将...
cupload本地图片上传预览插件
博主在网上找到了剥离出来的百度开发的ueditor中有多图片上传功能的例子(仅针对JSP),加上之前的适应IE8+的预览JS,二者结合,则既可以上传图片,又可以预览图片。 适应IE8+的预览JS: 下载网址为:...
基于zyupload.js,然后修改了部分代码,添加了查看上一张图片 下一张图片,以及预览放大镜效果。
3.无论图片过大还是过小,都可以按照固定大小显示 4.支持亮度,对比度,饱和度修饰 5.支持头像拍照保存 6.支持php,asp,jsp 调用 7.兼容性好,任何浏览器都正常使用 适合人群:新手及有一定经验的开发人员
主要应用于图片上传前的各种检测,主要有图片类型,图片大小的判断和适时预览,我也是网上查的,稍加整理了下,上传来分享下,希望有用。
jquery 上传图片前预览,就只是一个JS文件,使用也简单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head > 图片...
1.上传并预览,用户可以任意选择区域,支持头像旋转 2.支持上传成功,js 回调函数 3.无论图片过大还是过小,都可以按照固定大小显示 4.支持亮度,对比度,饱和度修饰 5.支持头像拍照保存 6.支持php,asp,jsp,...
这是一款可以选择多张图片同时上传,不要的还可以移除,实时预览图片的jQuery多张图片批量上传插件代码。 功能描述 实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复...
6.无论图片过大还是过小,都可以按照固定大小显示 7.支持亮度,对比度,饱和度修饰 8.支持图片不失真处理 9.支持png,jpg,bmp,gif 格式图片上传 10.支持上传头像自定义大小(pSize参数)企业版本 11.支持裁切框自定义...
flash上传头像预览裁剪-主要用于上传用户头像,然后可以实现在线编辑图片存储为不同像素 安装及部署: 1. 上传到 apache,iis,tomcat 服务器,通过域名访问 index.html 例如:http://localhost/index.html v1.5 ...
6、支持图片预览 7、支持暂停上传 8、拖拽上传 文件列表: (1)index.html是演示上传的 (2)server/webup.aspx是后台接收上传的(另外两ashx是测试文件) (3)webuploader.js和upload.js是webupload的配置文件和JS分...
Upload单张图片上传预览代码是一款基于jQuery实现的支持桌面拖动图片直接上传功能代码。