-
Notifications
You must be signed in to change notification settings - Fork 0
/
file.html
156 lines (155 loc) · 10.6 KB
/
file.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<script src = "http://www.wanmei.com/public/js/jq_171.js"></script>
<link href="http://img.app.wcdn.cn/ops/photo/style/css_v5/pages/common.css?v=20130125001" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/common.css?ver=20091107" />
<title>遮罩层</title>
<style>
*{margin: 0;padding: 0;}
p{border: solid 1px #000;margin: 10px;width: 200px;text-align: center;}
#drag_file p,#local_file p,#web_file p{padding: 10px;border:#ccc dotted 2px;}
#stcontent{position:absolute;left:19px;top:45px;width:640px;height:5px;z-index:6;}#stcontent form{position:relative;}#sttb{position:absolute;right:107px;top:12px;_top:11px;display:block;width:22px;height:17px;line-height:10em;z-index:1;overflow:hidden;background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -79px -135px white;}#sttb:hover{background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -79px -112px white;}#stsug{position:relative;padding:10px 0 0 10px;height:117px;z-index:2;background:url("http://list.image.baidu.com/t/shituimage.gif") repeat-x scroll 0 -400px #F8FBFF;}#stsug .left-border{position:absolute;left:0;top:0;width:3px;height:130px;background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -32px -113px transparent;}#stsug .right-border{position:absolute;right:0;top:0;width:3px;height:100%;background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -60px -113px transparent;}#sthead{font-weight:bold;font-size:14px;line-height:16px;height:14px;}#closest{position:absolute;display:block;width:22px;height:22px;line-height:10em;overflow:hidden;right:2px;top:0;z-index:5;background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -75px -159px transparent;}#closest:hover{background-position:-75px -185px;}.stf{line-height:14px;margin-top:20px;font-size:13px;height:20px;}.stf span,.stf img,.stf a{vertical-align:top;}.stf span{color:#010101;}.stf #sthelp{margin-left:5px;cursor:pointer;*position:relative;*top:-1px;}.stf .partition{margin:0 8px;color:#AAA9A9;}.stf #uploadImg{display:inline-block;overflow:hidden;cursor:pointer;position:absolute;height:15px;top:0;left:120px;}.stf #stfile{position:absolute;cursor:pointer;z-index:100;opacity:0;filter:alpha(opacity = 0);right:0;top:0;}.stuwr{width:508px;height:30px;display:inline-block;border:1px solid #CBCBCB;vertical-align:top;background-color:white;}.stuurl{font:16px/22px arial;height:22px;width:501px;color:black;padding:4px 0 4px 7px;*padding-top:3px;_padding-bottom:3px;vertical-align:top;border:0 none;}.stsb{background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -1px -72px transparent;display:inline-block;height:34px;width:97px;margin-left:0;*position:relative;z-index:0;vertical-align:top;}.stsb2{background:url("http://list.image.baidu.com/t/shituimage.gif") repeat scroll 0 -2px #DDD;border:0 none;cursor:pointer;font-size:14px;height:32px;padding:0;padding-top:2px\9;width:95px;}.stsb3{background-position:0 -39px;}.dragtg{font-size:13px;color:#727272;margin-top:5px;}#stmore{position:absolute;left:113px;top:64px;display:block;padding:10px;width:270px;height:119px;font-size:12px;background:url("http://list.image.baidu.com/t/shituimage.gif") repeat-x scroll 0 -255px transparent;}#stmore .left-border{position:absolute;left:-3px;top:0;width:4px;height:139px;background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll 0 -111px transparent;}#stmore .right-border{position:absolute;right:-3px;top:0;width:4px;height:139px;background:url("http://list.image.baidu.com/t/shituimage.gif") no-repeat scroll -19px -111px transparent;}#stmore ul{list-style-type:decimal;margin:10px 0 5px 21px;line-height:18px;font-family:"ËÎÌå";}#stmore div{text-align:left;}#stmore div a{text-decoration:none;}#stmore div a:hover{text-decoration:underline;}#point,#dragtip{position:absolute;left:1px;top:1px;z-index:2;width:632px;height:119px;text-align:center;background-color:#F8FBFF;color:#A0A0A0;}#point{z-index:4;vertical-align:middle;text-align:center;height:70px;padding-top:49px;}#point img{margin-right:8px;}#point span,#point img{line-height:24px;vertical-align:middle;}#dragtip{text-align:left;color:black;}#dragtip div{font-weight:bold;margin:10px 0 0 10px;font-size:14px;}#dragtip span{margin:28px auto 0 auto;display:block;font-size:14px;width:119px;}
#box{width:800px;height:600px;margin:50px auto;border:#ccc dotted 2px}
.wrapper {
background: none repeat scroll 0 0 #F5F5F5;
border: 2px dotted #CCCCCC;
border-radius: 5px 5px 5px 5px;
color: #919191;
font-family: 'Microsoft YaHei','Microsoft JhengHei',arial;
font-size: 198%;
height: 100px;
line-height: 100px;
margin: 0 auto;
text-align: center;
width: 400px;
}
</style>
<body>
<div id="stcontent">
<a class="sttb" id="sttb" href="javascript:void(0)" style="display:none" title="上传图片,搜索相关信息">stu</a>
<div id="stsug" class="stsug" style="display:none">
<div id="sthead">百度识图</div>
<div class="stf">
<form id="form2" target="_self" enctype="multipart/form-data" action="http://stu.baidu.com/i?rt=0&rn=10&ct=0&tn=baiduimagepc&ftn=indeximage" method="post" name="form2">
<span>粘贴图片网址</span><img id="sthelp" width="13" height="13" src="static/flash/mark.gif" /><span class="partition">|</span><a id="uploadImg" href="javascript:void(0)">从本地上传<input type="file" name="image" id="stfile" size="1"></a>
</form>
</div>
<form id="form1" target="_self" enctype="multipart/form-data" action="http://stu.baidu.com/i" method="get" name="form1">
<div id="sturl">
<span class="stuwr"><input type="text" id="stuurl" value="" autocomplete="off" class="stuurl" maxlength="100" size="42" name="objurl" /></span><span class="stsb"><input type="submit" id="sbobj" class="stsb2" onmousedown="this.className='stsb2 stsb3'" onmouseout="this.className='stsb2'" value="识图一下" /></span>
</div>
<div class="dragtg" id="dragtg">提示:您也可以把图片拖到这里</div>
<input name="filename" id="filename" value="" type="hidden">
<input name="rt" value="0" type="hidden">
<input name="rn" value="10" type="hidden">
<input id="stftn" name="ftn" value="indeximage" type="hidden">
<input name="ct" value="1" type="hidden">
<input name="tn" value="baiduimagepc" type="hidden">
</form>
<div class="stmore" id="stmore" style="display:none;">
<b>如何粘贴图片网址</b>
<ul>
<li>右键点击网页上的图片,选择“复制图片网址”;</li>
<li>在搜索框中,粘贴该网址(Ctrl+V),点击“识图一下”</li>
</ul>
<div><a href="http://stu.baidu.com/help.html" target="_blank">查看详细帮助>></a></div>
<div class="left-border"></div>
<div class="right-border"></div>
</div>
<a class="closest" href="javascript:void(0)" id="closest" title="关闭">关闭</a>
<div id="point" style="display:none;">
<img src="http://list.image.baidu.com/t/loading.gif" /><span>上传中,请稍候...</span>
</div>
<div id="dragtip" style="display:none;">
<div>百度识图</div>
<span>将图片拖到此处</span>
</div>
<div class="left-border"></div>
<div class="right-border"></div>
</div>
</div>
http://varnow.org/pages/html5/file_api/image_preview.html
<div id="dragUpload" class="wrapper last"> 拖拽图片到此 </div>
<div id="box" style="display:none">
<ul id="list"></ul>
</div>
<script type="text/javascript">
var point = document.getElementById("point"),
content = document.getElementById("stsug"),
submitobj = document.getElementById("sbobj"),
form = document.getElementById("form1"),
form2 = document.getElementById("form2"),
file = document.getElementById("stfile"),
url = document.getElementById("stuurl"),
entry = document.getElementById("sttb"),
close = document.getElementById("closest"),
tips = document.getElementById("stmore"),
hpobj = document.getElementById("hp"),
sthp = document.getElementById("sthelp"),
draghp = document.getElementById("dragtip"),
kw = document.getElementById("kw"),
dragts = document.getElementById("dragtg"),
clickurl = "http://stu.baidu.com",
onuploadtg = 0,ftn = document.getElementById("stftn").value || "",
isDisplay = 0,
isSubmit = 0;
//var oDragWrap = document.body;
function $id(id){
return document.getElementById(id);
};
var box = $id('box'),
ui = $id('list'),
oDragWrap = $id('dragUpload');
function dropHandler(fileList){
console.log(fileList.length)
if(fileList.length == 0){
alert('您还没有选择照片');
return;
}
if(fileList[0].type.indexOf('image') === -1){
alert('您选择丹照片不对,请选择,img,png,gif格式的照片');
return;
};
for(var i = 0,l = fileList.length;i<l;i++){
var file = fileList[i];
var reader = new FileReader();
reader.onload = function(e){
var html = [];
var src = file.result;
html.push("<li><img src="+ src +"></li>");
console.log(html)
};
reader.readAsDataURL(fileList[i]);
};
};
function init(){
if (window.File && window.FileReader && window.FileList && window.Blob) {
oDragWrap.addEventListener("dragenter", function(e){
e.stopPropagation();
e.preventDefault();
box.style.display = '';
}, false);
oDragWrap.addEventListener("dragleave", function(e){
e.stopPropagation();
e.preventDefault();
box.style.display = '';
}, false);
oDragWrap.addEventListener('dragover',function(e){
e.stopPropagation();
e.preventDefault();
});
oDragWrap.addEventListener('drop',function(e){
e.stopPropagation();
e.preventDefault();
var fileList = e.dataTransfer.files;
dropHandler(fileList);
},false);
} else {
// alert('The File APIs are not fully supported by your browser.');
};
};
init();
</script>
</body>
</html>