-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
97 lines (80 loc) · 3.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upframe" id="form" >
<div id="upLoadFile">
<input type="file" name="upfile" id="photo" onchange="upload();">
</div>
<!--存储关联id，方便扩展 -->
<input id="id" name="id" type="hidden" value="1"/>
<input id="type" name="type" type="hidden" value="upload"/>
</form>
<!-- 显示图片，不用于提交 -->
<div id="image" class="image"></div>
<!-- 显示提示的内容-->
<p class="bg-danger pull-left" id="return_text"></p>
<!--iframe 模拟提交 -->
<iframe id="upframe" name="upframe" style="display:none"></iframe>
<!--存储所有的图片地址，方便后续提交 -->
<input type="hidden" id="all_image" value="">
</body>
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
function upload(){
$('#form').submit();
}
function return_text(msg){
$('#return_text').html(msg);
}
function add(data){
var n=parseInt(Math.random()*100000);
if($("#all_image").val()=='')
image=data;
else
image=$("#all_image").val()+";"+data;
$("#all_image").val(image);
n='picture'+n;
$('#image').append('<div id="'+n+'" class="pull-left"><a href="'+data+'" target="_blank"><img src="'+data+'" class="img-circle" style="width: 140px; height: 140px;"/></a><div><button type="button" class="btn btn-default" onclick=turn("'+n+'","90")><span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true" ></span><button type="button" class="btn btn-default" onclick=del("'+n+'")><span class="glyphicon glyphicon-remove" aria-hidden="true" ></span><button type="button" class="btn btn-default" onclick=turn("'+n+'","-90")><span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true" ></span></div></div>');
$('#upLoadFile').html('<input type="file" name="upfile" id="photo" onchange="upload();">');
$('#return_text').html('');
}
function del(delName){
var d='#'+delName;
//删除的图片
img=$(d+" a").attr('href');
//全部的图片
all_img=$("#all_image").val();
$.ajax({
type: "POST", //提交的类型
url: "upload.php",
data:{type:"del_photo",name:img},//参数
success: function(msg){ //回调方法
//全部图片里面把删除的图片替换成空
str=all_img.replace(img+';',"");
str=str.replace(img,"");
$("#all_image").val(str);
$(d).html("success");
$(d).hide(300); //自动隐藏
}
})
}
function turn(delName,degrees){
var d='#'+delName;
img=$(d+" a").attr('href');
image=$("#image").html();
$.ajax({
type: "POST", //提交的类型
url: "upload.php",
data:{type:"turn_photo",name:img,degrees:degrees},//参数
success: function(msg){ //回调方法
$(d+" img").attr('src',img+ "?temp=" + Math.random());
}
})
}
</script>
</html>