Skip to content

Commit e630280

Browse files
author
hellojukay
committed
解决拖拽框无法自动适应高度的问题
1 parent 3040bb5 commit e630280

File tree

6 files changed

+150
-152
lines changed

6 files changed

+150
-152
lines changed

Diff for: ‎README.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
# httpfs
2-
a simple static file server write in pure golang, support upload。
2+
一个简单的静态文件服务器，支持拖拽上传文件，目的在于解决内网共享文件的问题。
3+
4+
[English](README_en.md)
35

4-
[简体中文](README_zh.md)
56

67
![travis](https://travis-ci.com/hellojukay/httpfs.svg?branch=master)
7-
# install
8+
# 安装
89
```shell
9-
// build require golang 1.11+
10+
// 需要 golang 1.16 以及以上版本
1011
go get github.com/hellojukay/httpfs
1112
```
1213
![demo](demo.gif)
13-
# feature
14-
* single binary file
15-
* cross platform
16-
* upload support
14+
# 特性
15+
* 单文件，免安装，静态编译无依赖
16+
* 支持Linux,Windows,Darwin 等
17+
* 拖拽上传

Diff for: ‎README_en.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# httpfs
2+
a simple static file server write in pure golang, support upload。
3+
4+
[简体中文](README_zh.md)
5+
6+
![travis](https://travis-ci.com/hellojukay/httpfs.svg?branch=master)
7+
# install
8+
```shell
9+
// build require golang 1.16+
10+
go get github.com/hellojukay/httpfs
11+
```
12+
![demo](demo.gif)
13+
# feature
14+
* single binary file
15+
* cross platform
16+
* upload support

Diff for: ‎README_zh.md

-14
This file was deleted.

Diff for: ‎fs.go

+3-129
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
package main
88

99
import (
10+
_ "embed"
1011
"errors"
1112
"fmt"
1213
"io"
@@ -26,135 +27,8 @@ import (
2627
"time"
2728
)
2829

29-
var tmpText = `
30-
<!DOCTYPE html>
31-
<html>
32-
<head>
33-
<style>
34-
html {
35-
height: 100%;
36-
}
37-
a {
38-
color: #369;
39-
}
40-
body {
41-
margin-top: 0px;
42-
height: 100%;
43-
}
44-
#drop-area {
45-
border: 2px dashed #ccc;
46-
border-radius: 20px;
47-
margin: 10px auto;
48-
padding: 20px;
49-
height: 100%;
50-
}
51-
#drop-area.highlight {
52-
border-color: purple;
53-
}
54-
#fileElem {
55-
display: none;
56-
}
57-
progress {
58-
display: none;
59-
width: 100%;
60-
height: 10px;
61-
padding-top: 1px;
62-
margin-top: 0px;
63-
border: 1px #0064B4;
64-
background-color:#e6e6e6;
65-
color: #0064B4; /*IE10*
66-
}
67-
</style>
68-
</head>
69-
<body>
70-
<progress id="progress" value="0" max="100"></progress>
71-
<div id="drop-area">
72-
<pre>
73-
{{range $href, $name := . }}
74-
<a href="{{$href}}">{{$name}}</a>
75-
{{ end}}
76-
</pre>
77-
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
78-
</div>
79-
<script>
80-
// ************************ Drag and drop ***************** //
81-
let dropArea = document.getElementById("drop-area")
82-
83-
// Prevent default drag behaviors
84-
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
85-
dropArea.addEventListener(eventName, preventDefaults, false)
86-
document.body.addEventListener(eventName, preventDefaults, false)
87-
})
88-
89-
// Highlight drop area when item is dragged over it
90-
;['dragenter', 'dragover'].forEach(eventName => {
91-
dropArea.addEventListener(eventName, highlight, false)
92-
})
93-
94-
;['dragleave', 'drop'].forEach(eventName => {
95-
dropArea.addEventListener(eventName, unhighlight, false)
96-
})
97-
98-
// Handle dropped files
99-
dropArea.addEventListener('drop', handleDrop, false)
100-
101-
function preventDefaults (e) {
102-
e.preventDefault()
103-
}
104-
105-
function highlight(e) {
106-
dropArea.classList.add('highlight')
107-
}
108-
109-
function unhighlight(e) {
110-
dropArea.classList.remove('active')
111-
}
112-
113-
function handleDrop(e) {
114-
var dt = e.dataTransfer
115-
var files = dt.files
116-
handleFiles(files)
117-
}
118-
119-
function handleFiles(files) {
120-
console.info(files)
121-
files = [...files]
122-
files.forEach(uploadFile)
123-
}
124-
125-
function uploadFile(file, i) {
126-
let size = file.size
127-
console.info('upload file',window.location.href)
128-
var url = window.location.href
129-
var xhr = new XMLHttpRequest()
130-
var formData = new FormData()
131-
xhr.open('POST', url, true)
132-
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
133-
let p = document.getElementById('progress')
134-
p.style.display = "inline-block"
135-
xhr.upload.onprogress = function(ev) {
136-
if(ev.lengthComputable) {
137-
p.max = ev.total
138-
p.value = ev.loaded
139-
}
140-
}
141-
142-
xhr.addEventListener('readystatechange', function(e) {
143-
if (xhr.readyState == 4 && xhr.status == 200) {
144-
window.location.reload()
145-
}
146-
else if (xhr.readyState == 4 && xhr.status != 200) {
147-
// Error. Inform the user
148-
}
149-
})
150-
formData.append('file', file)
151-
xhr.send(formData)
152-
}
153-
</script>
154-
155-
</body>
156-
</html>
157-
`
30+
//go:embed index.html
31+
var tmpText string
15832

15933
// A Dir implements FileSystem using the native file system restricted to a
16034
// specific directory tree.

Diff for: ‎go.mod

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module github.com/hellojukay/httpfs
22

3-
go 1.13
3+
go 1.16

Diff for: ‎index.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<html>
2+
3+
<head>
4+
5+
<style>
6+
a {
7+
color: #369;
8+
}
9+
10+
#drop-area {
11+
border: 2px dashed #ccc;
12+
border-radius: 20px;
13+
margin: 10px auto;
14+
padding: 20px;
15+
}
16+
17+
#drop-area.highlight {
18+
border-color: purple;
19+
}
20+
21+
#fileElem {
22+
display: none;
23+
}
24+
25+
#progress {
26+
display: none;
27+
width: 100%;
28+
height: 10px;
29+
padding-top: 1px;
30+
margin-top: 0px;
31+
border: 1px #0064B4;
32+
background-color: #e6e6e6;
33+
color: #0064B4;
34+
}
35+
</style>
36+
</head>
37+
38+
<body>
39+
<progress id="progress" value="0" max="100"></progress>
40+
<div id="drop-area">
41+
<pre>
42+
{{range $href, $name := . }}
43+
<a href="{{$href}}">{{$name}}</a>
44+
{{ end}}
45+
</pre>
46+
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
47+
</div>
48+
<script>
49+
let dropArea = document.getElementById("drop-area")
50+
51+
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
52+
dropArea.addEventListener(eventName, preventDefaults, false)
53+
document.body.addEventListener(eventName, preventDefaults, false)
54+
})
55+
56+
;['dragenter', 'dragover'].forEach(eventName => {
57+
dropArea.addEventListener(eventName, highlight, false)
58+
})
59+
60+
;['dragleave', 'drop'].forEach(eventName => {
61+
dropArea.addEventListener(eventName, unhighlight, false)
62+
})
63+
64+
dropArea.addEventListener('drop', handleDrop, false)
65+
66+
function preventDefaults(e) {
67+
e.preventDefault()
68+
}
69+
70+
function highlight(e) {
71+
dropArea.classList.add('highlight')
72+
}
73+
74+
function unhighlight(e) {
75+
dropArea.classList.remove('active')
76+
}
77+
78+
function handleDrop(e) {
79+
var dt = e.dataTransfer
80+
var files = dt.files
81+
handleFiles(files)
82+
}
83+
84+
function handleFiles(files) {
85+
console.info(files)
86+
files = [...files]
87+
files.forEach(uploadFile)
88+
}
89+
90+
function uploadFile(file, i) {
91+
let size = file.size
92+
console.info('upload file', window.location.href)
93+
var url = window.location.href
94+
var xhr = new XMLHttpRequest()
95+
var formData = new FormData()
96+
xhr.open('POST', url, true)
97+
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
98+
let p = document.getElementById('progress')
99+
p.style.display = "inline-block"
100+
xhr.upload.onprogress = function (ev) {
101+
if (ev.lengthComputable) {
102+
p.max = ev.total
103+
p.value = ev.loaded
104+
}
105+
}
106+
107+
xhr.addEventListener('readystatechange', function (e) {
108+
if (xhr.readyState == 4 && xhr.status == 200) {
109+
window.location.reload()
110+
}
111+
else if (xhr.readyState == 4 && xhr.status != 200) {
112+
}
113+
})
114+
formData.append('file', file)
115+
xhr.send(formData)
116+
}
117+
</script>
118+
119+
</body>
120+
121+
</html>

0 commit comments

Comments
 (0)