本周实现了之前编写的界面中一些button的功能。下面将讲解这些界面的实现过程:
首先是登录界面,登录界面只有一个按钮,功能是跳转到操作界面。
只需要在button的属性里加上一句话
οnclick="window.location.href='procss.html'
写出要跳转到的界面的地址即可
然后是操作界面,在实现过程中考虑到上传浏览图片应该是两个过程,保存和下载到本地是两个过程才比较合理。于是对操作界面进行了修改,效果如下:
upload:实现从本地选择图片,并显示在左边的画框位置:
其实现的主要思路参考百度:https://jingyan.baidu.com/article/49ad8bceba22795834d8fa18.html?qq-pf-to=pcqq.c2c
但这只能实现上传图片,并不能显示出来,显示的思路是,获取上传的图片的路径,更新左边画框图片的src
var img=document.getElementById("img1");
var url = window.URL.createObjectURL(fileinput.files[0]);
img.src=url;
效果如图所示:
下一步是将图片上传到服务器
参考百度的方法:https://jingyan.baidu.com/article/54b6b9c090bd272d583b47f4.html
但是单纯这样实现会造成界面跳转,所以当界面跳转后必须跳回当前界面。
echo "<script>alert('文件上传成功!');
history.go(-1);</script>";
button“down”的作用是将右侧画框中的图片下载到本地,实现方法:
<a href="#" download="" id="down">
<button8 style="display:inline-block;
padding:10px;
width:100px;
height:20px;
top:102px;
left:760px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/2.jpg);
position:relative;
text-align:center;"
οnclick="Down()">
down
</button8>
function Down(){
var image = document.getElementById("img2");
var down = document.getElementById("down");
down.href=image.src;
down.download="img";
down.click();
}