效果:
单击:
选择:
自动出现另一个可选择图片:
代码块
抽离出来有点累,改成简略版了
Html代码
<form id="form1">
<div id="sellcontent">
<div style="width: 150px; height: 150px; display: inline-block;">
<input type="file" id="file3" name="file3" title="日常图片" multiple="multiple" onchange="readFilec()" class="sellfile1" />
<img src="images/sell3.jpg" id="img3" onload="ReSizePic(this)" class="sellimg1" />
</div>
<div style="width: 150px; height: 150px; display: inline-block;">
<input type="file" id="file4" name="file4" title="日常图片" multiple="multiple" onchange="readFiled()" class="sellfile1" style="z-index: -1" />
<img src="images/sell3.jpg" id="img4" onload="ReSizePic(this)" />
</div>
</div>
<input type="text" name="miao"/>
<input id="sellbutton1" type="button" value="提交" onclick="UpladFile()" />
</form>
CSS样式
#sellcontent .sellfile1 {
margin-left: 5px;
opacity: 0;
position: absolute;
width: 145px;
height: 145px;
}
#sellcontent .sellimg1 {
height: 145px;
width: 147px;
border: 1px dashed black;
margin-left: 5px;
opacity:1;
}
JS代码
<script>
$(function () {
//初始图片隐藏
$("#sellcontent img:gt(0)").css('opacity', '0');
})
function readFilec() {
//第二张图片启用
$("#sellcontent input[type=file]").eq(1).css({ 'z-index': '1' });
$("#sellcontent img").eq(1).addClass('sellimg1');
$("#sellcontent img").eq(1).css('opacity', '1');
//得到文件对象
var imgFile = document.getElementById('file3').files[0];
//op
var fileReader = new FileReader();
//设置回调函数,即获取到文件路径后的操作
fileReader.onload = function () {
var img = document.getElementById('img3').src = fileReader.result;
}
//读取文件
fileReader.readAsDataURL(imgFile);
};
function readFiled() {
//得到文件对象
var imgFile = document.getElementById('file4').files[0];
//op
var fileReader = new FileReader();
//设置回调函数,即获取到文件路径后的操作
fileReader.onload = function () {
var img = document.getElementById('img4').src = fileReader.result;
}
//读取文件
fileReader.readAsDataURL(imgFile);
};
//设置自动生成图片缩略图
function ReSizePic(ThisPic) {
var RePicWidth = 200; //这里修改为您想显示的宽度值
//============以下代码请勿修改==================================
var TrueWidth = ThisPic.width; //图片实际宽度
var TrueHeight = ThisPic.height; //图片实际高度
var Multiple = TrueWidth / RePicWidth; //图片缩小(放大)的倍数
ThisPic.width = RePicWidth; //图片显示的可视宽度
ThisPic.height = TrueHeight / Multiple; //图片显示的可视高度
}
function UpladFile() {
var q = document.getElementsByClassName('sellfile1'); //根据样式获取文件集合
var FileController = "Method.aspx"; // 接收上传文件的后台地址
// FormData 对象
var fileObj = q[0].files[0]; // js 获取文件对象
var form = new FormData(document.getElementById("form1"));//直接获取表单所有值,文件无法直接获取只能一个一个获取
form.append("file", fileObj); // 文件对象
fileObj = q[1].files[0]; // js 获取文件对象
form.append("file", fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//初始化XHLHttpRequest
xhr.open("post", FileController, true);
//发送请求
xhr.send(form);
//回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
if (xhr.responseText == "True")
alert("上传成功");
else
alert("上传失败");
}
}
}
</script>
Method.aspx代码
string name = Request["miao"].ToString();
//获取文件集合
var flist = Request.Files;
//获取窗体变量
var form = Request.Form;
string a = form["name"];
for (int i = 0; i < flist.Count; i++)
{
if (flist[i].FileName != "")
//汽车图库可以改为相应的文件夹
flist[i].SaveAs(Server.MapPath(".") + "/汽车图库/" + flist[i].FileName);
else
break;
}
bool ok = true;
Response.Write(ok);
附上简陋版连接:https://download.youkuaiyun.com/download/weixin_44713389/11225024
关于图片右上角的小叉懒得做,有做的大哥发我一份576004720
以上