一、HTML页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/disk/weiqin/js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div style="width: 33%;height: 110px;margin: 10px;">
<img src="" id="img1" width="100%" height="110px"/>
</div>
<a href="javascript:;" class="file">
上传1
<input type="file" name="pic_store_environment" id="file1" multiple="multiple"/>
</a>
<div style="width: 33%;height: 110px;margin: 10px;">
<img src="" id="img2" width="100%" height="110px"/>
</div>
<a href="javascript:;" class="file">
上传2
<input type="file" name="pic_store_logo" id="file2" multiple="multiple"/>
</a>
</body>
二、JavaScript代码：
<script>
$(document).ready(function(e) {
$("#sjrztj").click(function(){
var file0=document.getElementById("file1").value;
var file1=document.getElementById("file2").value;
if(file1.length<1){
alert("请上传门店图");
return false;
}
if(file2.length<1){
alert("请上传店内环境图");
return false;
}
});
});
$("#file1").change(function () {
// getObjectURL是自定义的函数，见下面
// this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个
// ，但是这里只读取第一个
var objUrl = getObjectURL(this.files[0]);
// 这句代码没什么作用，删掉也可以
console.log("objUrl = "+objUrl) ;
if (objUrl) {
// 在这里修改图片的地址属性
$("#img1").attr("src", objUrl);
}
});
$("#file2").change(function () {
var objUrl = getObjectURL(this.files[0]);
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img2").attr("src", objUrl);
}
});
</script>
扫一扫
5092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
