上传图片本地预览

最新推荐文章于 2021-05-15 20:35:14 发布

慕容雪cly

最新推荐文章于 2021-05-15 20:35:14 发布

阅读量571

点赞数

本文链接：https://blog.csdn.net/cly153239/article/details/44781255

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加商品</title>
<link href="../css/addProduct.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/AjaxFileUploaderV2.1/jquery.js"></script>
<script type="text/javascript" src="../js/addProduct.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/AjaxFileUploaderV2.1/ajaxfileupload.js"></script>
<script type="text/javascript">
function setImagePreview(obj) {
var doc="doc"+obj;
var preview="preview"+obj;
var docObj = document.getElementById(doc);
var fon="obj"+obj;
var localImag="localImag"+obj;
var imgObjPreview = document.getElementById(preview);
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '85px';
imgObjPreview.style.height = '85px';
//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 = "85px";
localImagId.style.height = "85px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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();
}
document.getElementById(fon).style.display="none";
return true;
}
</script>
</head>

<body οnlοad="loadData();">
<div class="mainFrame">

<form name="upLoadForm" id="upLoadForm" method="post" enctype="multipart/form-data">
<div class="shopInfo">
商品名称: <input type="text" name="commodity.comName" id="comName"
required="required" οninput="change1(this);">
<div id="shopName"></div>
</div>
<div><input type="hidden"
id="merNo" name="merchant.merNo"></div>
<div class="shopInfo">
商品库存: <input type="text" name="commodity.comRepertory"
id="comRepertory" οninput="change2(this);">
<div id="shopKc"></div>
</div>
<div class="shopInfo">
商品价格: <input type="text" name="commodity.comPrize" id="comPrize"
οninput="change3(this);">
<div id="shopPrice"></div>
</div>
<div class="product">
<div class="tpDesc">商品图片介  绍:</div>
<div class="comPrize">

<div class="div1" id="localImag1">
<img src="../img/shop/13.jpg" width=85px height="66px"
id="preview1"">
<div id="fon1" class="font"><a id="obj1">添加商品</a></div>
<input type="file" id="doc1" οnchange="setImagePreview(1);"
name="image">
</div>
<div class="div1" id="localImag2">
<img src="../img/shop/13.jpg" width=85px height="66px"
id="preview2"">
<div id="fon2" class="font"><a id="obj2">添加商品</a></div>
<input type="file" id="doc2" οnchange="setImagePreview(2);"
name="image">
</div>
<div class="div1" id="localImag3">
<img src="../img/shop/13.jpg" width=85px height="66px"
id="preview3"">
<div id="fon3" class="font"><a id="obj3">添加商品</a></div>
<input type="file" id="doc3" οnchange="setImagePreview(3);"
name="image">
</div>
<div class="div1" id="localImag4">
<img src="../img/shop/13.jpg" width=85px height="66px"
id="preview4"">
<div id="fon4" class="font"><a id="obj4">添加商品</a></div>
<input type="file" id="doc4" οnchange="setImagePreview(4);"
name="image">
</div>
<div class="div1" id="localImag5">
<img src="../img/shop/13.jpg" width=85px height="66px"
id="preview5"">
<div id="fon5" class="font"><a id="obj5">添加商品</a></div>
<input type="file" id="doc5" οnchange="setImagePreview(5);"
name="image">
</div>
<div class="fontStyle">(建议尺寸： 640*640像素；您可以拖拽图片调整图片顺序。）</div>
</div>
</div>
<div class="type">
运费价格：<input type="text" class="input" name="commodity.comFreight"
id="comFreight" οninput="change4(this);"> 商品分类：

<select name="commodity.comType" class="input" id="comType"
οninput="change5(this);">
<option value=''>-- 请选择商品分类 --</option>
</select>
<div id="shop"></div>
</div>

</form>
<div>
<input type="button" value="提交" id="tj">
</div>
</div>

</body>

</html>

css：

input[type="file"]{
filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
position:absolute;
margin-left:-50px;
/*margin-top:65px;*/
width:90px;
z-index:10;
height:90px;
cursor:pointer;
margin-top:-120px;}