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

最新推荐文章于 2020-04-19 14:14:41 发布

zhonghua1989

最新推荐文章于 2020-04-19 14:14:41 发布

阅读量3.7k

点赞数

分类专栏： javascript 文章标签： jquery function div input html class

本文链接：https://blog.csdn.net/zhonghua1989/article/details/7875322

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天闲来没多少事做，突发奇想自己做个弹出对话框，虽然说的是自己做但是好多东西都还是用的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" οnsubmit="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>

附上效果图