您的位置：首页 > Web前端 > JQuery

jquery弹出可拖动对话框+无刷新图片上传

2012-08-16 23:15 369 查看

今天闲来没多少事做，突发奇想自己做个弹出对话框，虽然说的是自己做但是好多东西都还是用的jquery现成的东西。

废话不多说直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$().ready(function(){
//给层3注册单击事件(就是单击关闭的那个层)
$("#div3").click(function(){
clickclose();
});

//下面可以拖动的关键
//div2就是标题栏的那个层  当鼠标按下的时候
$("#div2").mousedown(function(dom){
//当前层的位置
var top1=$("#div1").css("top");
var left1=$("#div1").css("left");
//鼠标单击的坐标位置
var x=dom.clientX;
var y=dom.clientY;
//鼠标点击的层的位置
var x1=Math.abs(x-parseInt(left1));
var y1=Math.abs(y-parseInt(top1));
//给body注册鼠标移动事件
$("body").mousemove(function(dom){
var x=dom.clientX;
var y=dom.clientY;
//鼠标移动的时候就改变div1(最外边那个层)的位置
$("#div1").css({"top":y-y1,"left":x-x1})
});
//鼠标松起的时候
}).mouseup(function(){
//解除body的鼠标移动事件
$("body").unbind("mousemove");
});

$("#imgupload").click(function(){
clickshow();
});

});
//显示对话框
function clickshow(){
$("#div1").fadeIn("slow");
}
//关闭对话框
function clickclose(){
$("#div1").fadeOut("slow");
}
//随便做一个无刷新图片上传，可预览
function checkimg(){
var imgp=["jpg","jpeg","png","gif"];
var imgName=$("#imgName").val();
var pName=(imgName.substr(imgName.lastIndexOf(".")+1)).toLocaleLowerCase();
var i=0;
for(i=0;i<imgp.length;i++){
if(imgp[i]==pName){
break;
}
}
if(i<imgp.length){
return true;
}
alert("支持图片类型："+imgp.toString());
return false;

}
</script>

<style type="text/css">
.div1 {
display: none;
position: absolute;
width: 300px;
height: 150px;
top: 200px;
left: 150px;
border: 1px solid black;
}

.div2 {
background-color: gray;
width: 300px;
height: 30px;
border: 1px solid black;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
}

.div3 {
text-align: center;
width: 30px;
height: 30px;
border: 1px solid black;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-width: 0px
}
</style>
</head>
<body>
<table>
<tr>
<td valign="top"><input id="imgupload" type="button" value="图片上传"></td>
<td width="150px">
<div id="showimg" style="display: none;"><img id="img1" src="" width="150px" /></div>
</td>
</tr>
</table>
<div id="div1" class="div1">
<div id="div2" class="div2" align="right"">
<div id="div3" class="div3">X</div>
</div>
<div>
<!--target="uploadfile" 提交不刷新的关键之处哦-->
<form action="tests" method="post" onsubmit="return checkimg()"
enctype="XXXXX" target="uploadfile" >
<input id="imgName" type="file">
<input type="submit"" value="上传" >
</form>
<iframe name="uploadfile" width="0px" height="0px"></iframe></div>
</div>
</body>
</html>

附效果图

上传处理后跳出的处理页面。个人java比较熟悉所以就用的jsp了

<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$().ready(function(){
//判断是否上传成功
if($("#success").val()=='true'){
loadimg();
alert("文件上传成功!");
showimg();
var div1=parent.document.getElementById("div1");
//alert("文件上传成功");
$(div1).fadeOut("slow");
}else{
alert("文件上传失败");
}
})

function showimg(){
var showimg= parent.document.getElementById("showimg");
$(showimg).css("display","");
}
//将上传成功图片的路径赋值给img的src去请求图片
function loadimg(){
var imgurl=$("#imgurl").val();
var img=parent.document.getElementById("img1");
$(img).attr("src",imgurl);
}

</script>
</head>
<body>
<input id="imgurl" type="hidden" value="${imgurl }">
<input id="success" type="hidden" value="${success }">
</body>
</html>

附上效果图

个人想法还望高人多多指点

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function div input html class

相关文章推荐

新的分享

章节导航