web项目jquery实现本地图片预览
来源：互联网 发布：php工程师面试题及答案 编辑：程序博客网 时间：2024/05/16 23:53
这次在做图片上传时，遇到了一个非常棘手的问题，
web项目有的浏览器不支持图片的绝对路径，
包括在用了百度搜到的"file:///C:\XXX\XX.png",
最后在借鉴了豆瓣上一位网友的代码下，解决了这个问题，
非常感谢提供技术的网友，我把我的代码写在下面，
关于图片的用红色字体标注
贴上我的预览效果
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery-1.8.0.min.js"></script>
<title>添加商品</title>
</head>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery-1.8.0.min.js"></script>
<title>添加商品</title>
</head>
<style>
#shop-return{border-radius: 10px;background-color: #67905d;height: 35px;width: 100px;font-size: 14px;color: white;margin-left: 15px;}
.shop-btn-image{height: 14px;width: 14px;margin-top: 3px;margin-right: 5px;}
.elegant-aero {margin-left:auto;margin-right:auto;max-width: 500px;background: #d2ffde;padding: 20px 20px 20px 20px;font: 12px Arial, Helvetica, sans-serif;color: #666;}
.elegant-aero h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 10px 10px 10px 20px;display: block;background: #C0E1FF;border-bottom: 1px solid #B8DDFF;margin: -20px -20px 15px;}
.elegant-aero h1>span {display: block;font-size: 12px;}
.elegant-aero label>span {float: left;margin-top: 10px;color: #5E5E5E;}
.elegant-aero label {display: block;margin: 0px 0px 5px;}
.elegant-aero label>span {float: left;width: 20%;text-align: right;padding-right: 15px;margin-top: 10px;font-weight: bold;}
.elegant-aero label>img {color: #888;width: 35%;padding: 0px 0px 0px 0px;border: 1px solid #C5E2FF;background: #FBFBFB;outline: 0;-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;box-shadow: inset 0px 1px 6px #ECF3F5;font: 200 12px/25px Arial, Helvetica, sans-serif;height: 100px;line-height:15px;margin: 2px 6px 0px 0px;margin-left: 12.5%;display: block;}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {color: #888;width: 70%;padding: 0px 0px 0px 5px;border: 1px solid #C5E2FF;background: #FBFBFB;outline: 0;-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;box-shadow: inset 0px 1px 6px #ECF3F5;font: 200 12px/25px Arial, Helvetica, sans-serif;height: 30px;line-height:15px;margin: 2px 6px 16px 0px;}
.elegant-aero textarea{height:100px;padding: 5px 0px 0px 5px;width: 70%;resize: none;}
.elegant-aero select {background: #fbfbfb url('image/down.png') no-repeat right;background: #fbfbfb url('image/down.png') no-repeat right;appearance:none;-webkit-appearance:none;-moz-appearance: none;text-indent: 0.01px;text-overflow: '';width: 70%;}
.elegant-aero .button{padding: 10px 30px 10px 30px;background: #66C1E4;border: none;color: #FFF;box-shadow: 1px 1px 1px #4C6E91;-webkit-box-shadow: 1px 1px 1px #4C6E91;-moz-box-shadow: 1px 1px 1px #4C6E91;text-shadow: 1px 1px 1px #5079A3;}
.elegant-aero .buttonImg1{padding: 0px 30px 3px 30px;background: #b4c5bd;border: none;color: #FFF;box-shadow: 1px 1px 1px #4C6E91;-webkit-box-shadow: 1px 1px 1px #4C6E91;-moz-box-shadow: 1px 1px 1px #4C6E91;text-shadow: 1px 1px 1px #5079A3;margin-left: 115px;}
.elegant-aero .buttonImg2{padding: 0px 30px 3px 30px;background: #b4c5bd;border: none;color: #FFF;box-shadow: 1px 1px 1px #4C6E91;-webkit-box-shadow: 1px 1px 1px #4C6E91;-moz-box-shadow: 1px 1px 1px #4C6E91;text-shadow: 1px 1px 1px #5079A3;margin-left: -2px;}
.elegant-aero .button:hover{background: #3EB1DD;}
</style>
<body>
<div style="margin-top: 2%;margin-left:3%;">
<button id="shop-return"><img class="shop-btn-image" src="image/fanhui.png">返回</button>
</div>
<div class="elegant-aero" style="margin-left: 3%;margin-top: 3%;">
<form action="" method="post">
<h1>新增商品
<span>请输入你要添加商品的详细信息</span>
</h1>
<label>
<span>商品名称 ：</span>
<input id="shop-name" type="text" name="shopName" placeholder="填写商品名" />
</label>
<label>
<span>商品图片 ：</span>
<input id="shop-file" type="file" style="display: none;" onchange="javascript:setImagePreview1(this);">
<img id="shop-image" class="preview" alt="选择后请点击上传" src="">
<input type="button" class="buttonImg1" value="取消">
<input type="button" class="buttonImg2" value="上传">
</label>
<label>
<span>商品原价 ：</span>
<input id="old-price" type="text" name="oldPrice" placeholder="输入商品原价" />
</label>
<label>
<span>商品现价 ：</span>
<input id="new-price" type="text" name="newPrice" placeholder="输入商品现价" />
</label>
<label>
<span>商品库存 ：</span>
<input id="shop-stock" type="text" name="shopStock" placeholder="输入商品库存" />
</label>
<label>
<span>商品描述 ：</span>
<textarea id="description" name="description" placeholder="描述商品，如功能、外观等"></textarea>
</label>
<label>
<span>商品分类 ：</span><select name="classify">
<option value="0">食品类</option>
<option value="1">电子产品</option>
<option value="2">家庭办公</option>
<option value="3">虚拟产品</option>
</select>
</label>
<label>
<span> </span>
<input type="button" class="button" value="添加" />
</label>
</form>
</div>
</body>
<script type="text/javascript">
$("#shop-return").click(function(){
window.location.href="shop_list.jsp";
window.close();
})
function setImagePreview1(obj){
var docObj=$(obj).get(0);
var imgObjPreview=$(obj).parent('label').find(".preview").get(0);
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
//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");
var imgObjPreview=$(obj).parent('label').find(".preview").get(0);
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
var extName = imgSrc.substring(imgSrc.lastIndexOf(".")+1,imgSrc.length);//截取后缀名
if(extName!='zip' && extName!='rar')
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</html>
阅读全文
1 0
- web项目jquery实现本地图片预览
- jquery实现上传图片本地预览效果
- Jquery图片上传本地预览
- jquery实现客户端快速查询，本地图片预览功能
- jquery实现兼容浏览器的图片上传本地预览功能
- jquery实现兼容浏览器的图片上传本地预览功能
- html5以及jQuery实现本地图片上传前的预览
- jquery实现图片上传前本地预览功能
- jquery实现图片上传前本地预览功能
- jquery实现图片上传前本地预览功能
- html5以及jQuery实现本地图片上传前的预览
- jquery实现图片上传前本地预览功能
- JavaScript实现本地图片预览
- js 实现 本地图片预览
- js实现本地图片预览
- jQuery图片上传前先在本地预览
- jQuery图片上传前先在本地预览
- jQuery图片上传前先在本地预览
- cookie本地记住密码
- jenkins自动部署到linux服务器记录
- 熟练这些，才会知道 Android studio 有多高效
- 自动客服功能的微信小程序
- 还在用枚举？我早就抛弃了！（Android 注解详解）
- web项目jquery实现本地图片预览
- 小诗《心结》
- 常用电脑软件你选对了吗？（知道的不知道的，这些软件每个都值得你安装）
- Oracle利用PIVOT和UNPIVOT进行行列转换
- 一文详尽 Android 通信：四大组件之间 & 进程间 & 线程间 & 多个App间
- Excel统计某字符或关键字出现的次数
- 向日葵公主与驴的爱情故事
- 动态规划 day14 B题
- Glide坑遇记：宽度铺满高度自适应 & GIF加载之坑
