<div>
选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
</div>
预 览:
<div id="localImag">
<%--预览,默认图片--%>
<img id="preview" alt="预览图片" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg" style="width: 400px; height: 400px;"/>
</div>
<script type="text/javascript">
//检查图片的格式是否正确,同时实现预览
function setImagePreview(obj, localImagId, imgObjPreview) {
var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
if (obj.value == '') {
$.messager.alert("让选择要上传的图片!");
return false;
}
else {
var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
////布尔型变量
var isExists = false;
if(!imgObjPreview){
imgObjPreview = document.getElementById('preview');
}
//循环判断图片的格式是否正确
for (var i in array) {
if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
//图片格式正确之后,根据浏览器的不同设置图片的大小
if (obj.files && obj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '400px';
imgObjPreview.style.height = '400px';
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
}
else {
//IE下,使用滤镜
obj.select();
var imgSrc = document.selection.createRange().text;
//必须设置初始大小
localImagId.style.width = "400px";
localImagId.style.height = "400px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
$.messager.alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
isExists = true;
return true;
}
}
if (isExists == false) {
$.messager.alert("上传图片类型不正确!");
return false;
}
return false;
}
}
//显示图片
function over(imgid, obj, imgbig) {
//大图显示的最大尺寸 4比3的大小 400 300
maxwidth = 400;
maxheight = 300;
//显示
obj.style.display = "";
imgbig.src = imgid.src;
//1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3
//2、如果宽超过了并且高没有超,设置宽为最大值
//3、如果宽没超过并且高超过了,设置高为最大值
if (img.width > maxwidth && img.height > maxheight) {
pare = (img.width - maxwidth) - (img.height - maxheight);
if (pare >= 0)
img.width = maxwidth;
else
img.height = maxheight;
}
else if (img.width > maxwidth && img.height <= maxheight) {
img.width = maxwidth;
}
else if (img.width <= maxwidth && img.height > maxheight) {
img.height = maxheight;
}
}
</script>
分享到:
相关推荐
js实现图片上传预览功能,自己稍微加工了一下,这个在IE9上面挺有意思的,alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30,第二次之后就会显示图片的实际大小,具体原理不懂,有明白的...
利用koa2 静态资源服务器为后端, html + js+css 为前端, 实现文件的上传下载功能, 适合新手,
html file控件选择文件后立即预览 js实现 JS实现图片上传前先图片预览功能
本HTML5实现多文件图片预览上传功能实例,使用zyFile.js插件
由html5实现上传预览功能,可进行拖拽图片,也可点击按钮上传图片,预览可以删除图片
写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...
weui框架暂时只有css文件,并没有js文件实现其功能,我在其html+css后面增加了js实现其功能,为大家提供方便,也为自己保存记录。具体实例代码大家参考下本
diyUpload JAVA版,支持多文件,多图片先预览后上传,JAVA 项目文件部署即可使用
pdfobject.js pdf文件现在预览 pdfobject.js pdf文件现在预览 pdfobject.js pdf文件现在预览 pdfobject.js pdf文件现在预览
实现移动端图片上传功能,能够预览图片
HTML5结合zyfile.js插件实现的多文件图片预览上传功能特效源码.zip
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
//此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){...
主要为大家详细介绍了JS+HTML5 FileReader实现文件上传前本地预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
html上传视频文件video预览(不支持多文件预览,在ie及火狐下测试好使,其他游览未测试,纯js 不用引入插件 )
具有多文件上传、拖拽、进度条和图像预览功能的文件上传插件,支持跨域、分块、暂停恢复和客户端图像缩放。可与任何服务端平台(如PHP、Python、Ruby on Rails、Java、Node.js、Go等)一起使用,支持标准的HTML表单...
使用webupload实现了在C# .net项目中的断点续传演示(绝对不亏的,现在.net中webupload服务端好多都不完整,我这个是自己写完用到项目中的,比较稳定,虽然代码比较初级,后面也没整理) 演示地址:...
java头像设置代码例子,简单容易学习,适合初学的你,使用的是原生js编写
JS+asp.net+图片上传+预览+支持多上传+上传前预览