主要演示文件拖拽上传或点击上传到不同的目录中,提供下载和删除功能。

目录结构:

-main.go

--share(用于分类存放上传文件的目录)

--v(视图目录)

---share.html

main.go

//自编了一个文件共享系统,everyone可上传下载,无权限控制,公网使用风险大,需完善
//所有文件将上传到./share/XXX目录下,可通过http://localhost:8080/share/XXX 访问并下载
//
package main import (
"fmt"
"io"
"io/ioutil"
"os"
"path/filepath"
"sort" "github.com/kataras/iris"
) const (
upload_path string = "./share/"
) //表示一个上传的文件
type Upfile struct {
Url string //位置,如share/XXX/
Name string //文件名,如abc.doc
Date string //文件时间,ModTime转string
} //表示权限
type Allow struct {
UP bool //可上传
Down bool //可下载
Del bool //可删除
} type Updir []Upfile //表示一个目录当中,所有上传的文件
// 用Len Less Swap使Updir可排序,可用sort.Sort排序
func (d Updir) Len() int { return len(d) } // Date降序
func (d Updir) Less(i, j int) bool {
return d[i].Date > d[j].Date
} // 交换
func (d Updir) Swap(i, j int) { d[i], d[j] = d[j], d[i] } func main() {
fmt.Println("OK!请访问 :8080/share")
//启动一个http 服务器
app := iris.New()
//静态文件服务
app.StaticWeb("/share", "./share")
//注册视图目录
tmpl := iris.HTML("./v", ".html")
app.RegisterView(tmpl)
//主页
app.Get("/share", func(ctx iris.Context) {
ctx.View("main.html")
})
//下载
app.Get("/share/{path:alphabetical}", func(ctx iris.Context) {
FlagAllowDel := false //允许删除文件标志
//URL中的路径
reqPath := ctx.Path() //如:/share/aaa
myfolder := "." + reqPath + "/" //如:./share/aaa/
//获取执行文件路径:
rootdir, err := filepath.Abs(filepath.Dir(os.Args[])) //如:e:\goapp\myapp
createf := rootdir + reqPath + "/" //如:e:\goapp\myapp/share/aaa/
_, err = os.Stat(createf) //os.Stat获取文件信息
//判断文件夹path存在,否则创建之 ,绝对路径
if os.IsNotExist(err) {
os.MkdirAll(createf, os.ModePerm)
}
//列出目录下的文件
var upfile Upfile
fileins := make(Updir, )
files, _ := ioutil.ReadDir(myfolder)
for _, file := range files {
if file.IsDir() {
continue
} else {
upfile.Name = file.Name()
upfile.Url = ctx.Path() + "/" + file.Name()
upfile.Date = file.ModTime().Format("2006-01-02 15:04:05")
fileins = append(fileins, upfile)
}
}
//fmt.Println(fileins[0].Name)
//倒序排序
sort.Sort(fileins)
ctx.ViewData("FlagAllowDel", FlagAllowDel)
ctx.ViewData("Files", fileins)
// 渲染视图文件: ./v/index.html
ctx.View("share.html") })
//主页管理,与主页共用模板 .v/share.html
app.Get("/admin/{path:alphabetical}", func(ctx iris.Context) {
FlagAllowDel := true //允许删除文件标志
//列出目录下的文件
var upfile Upfile
fileins := make(Updir, )
myfolder := "./share" + ctx.Path()[:] + "/"
files, _ := ioutil.ReadDir(myfolder)
for _, file := range files {
if file.IsDir() {
continue
} else {
upfile.Name = file.Name()
upfile.Url = ctx.Path() + "/" + file.Name()
upfile.Date = file.ModTime().Format("2006-01-02 15:04:05")
fileins = append(fileins, upfile)
}
}
//fmt.Println(fileins[0].Name)
//倒序排序
sort.Sort(fileins)
ctx.ViewData("FlagAllowDel", FlagAllowDel)
ctx.ViewData("Files", fileins)
// 渲染视图文件: ./v/index.html
ctx.View("share.html") })
//上传, 接收用XMLHttpRequest上传的文件
app.Post("/share/{path:alphabetical}", func(ctx iris.Context) {
//获取文件内容
file, head, err := ctx.FormFile("upfile")
//可参考Get时的路径判断pathwww是否存在,这里省略了...
myfolder := "." + ctx.Path() + "/"
defer file.Close()
//创建文件
fW, err := os.Create(myfolder + head.Filename) if err != nil {
fmt.Println("文件创建失败")
return
}
defer fW.Close()
_, err = io.Copy(fW, file)
if err != nil {
fmt.Println("文件保存失败")
return
}
ctx.JSON(iris.Map{"success": true, "res": head.Filename}) })
//下载,未使用
app.Get("/share/down", func(ctx iris.Context) {
//无效ctx.Header("Content-Disposition", "attachment;filename=FileName.txt")
ctx.ServeFile("./share/1.txt", false)
})
//删除
app.Post("/admin/{dir}", func(ctx iris.Context) {
path := ctx.PostValue("path") //如 /admin/aaa/111.txt
myfolder := "./share" + path[:]
fmt.Println(myfolder)
os.Remove(myfolder)
ctx.JSON(iris.Map{"success": true, "res": "aaaaaaaaaaaa"}) }) app.Run(iris.Addr(":8080"))
}

share.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{.Title}}</title>
<style>
.file_upload_box {
display: inline-block;
width: 200px;
height: 50px;
position: relative;
overflow: hidden;
}
.file_upload_box input[type=file] {
position: absolute;
left: ;
top: ;
width: %;
line-height: 50px;
opacity: ;
cursor: pointer;
}
.file_upload_box a {
display: inline-block;
width: %;
line-height: 50px;
text-align: center;
font-family: "Microsoft yahei";
background-color: #f60;
color: #FFF;
font-weight: ;
text-decoration: none;
}
.flexcontainer{
display:flex;
}
</style> </head>
<body>
<div class="flexcontainer">
{{if $.FlagAllowDel}}
<span>管理面板</span>
{{else}}
<div id="fileSpan" style="background-color:#FFE;width:100%;height:50px">请将文件拖到这里上传(覆盖同名文件)</div>
<div class="file_upload_box">
<input type="file" name="file" onchange="upload(this)"/>
<a href="#none">上传文件</a>
</div>
{{end}} </div>
<script type="text/javascript">
window.onload = function(){
var uuz = document.getElementById('fileSpan'); uuz.ondragenter = function(e){
e.preventDefault();
} uuz.ondragover = function(e){
e.preventDefault();
this.innerHTML = '请松开鼠标';
this.style.cssText="background-color:#EFF;width:100%;height:50px;"
} uuz.ondragleave = function(e){
e.preventDefault();
this.innerHTML = '请将文件拖到这里上传';
this.style.cssText="background-color:#FFE;width:100%;height:50px;"
} uuz.ondrop = function(e){
e.preventDefault();
this.innerHTML = '请将文件拖到这里上传'; var upfile = e.dataTransfer.files[]; //获取要上传的文件对象(可以上传多个)
// alert(upfile.name)
//alert(upfile.type)
var formdata = new FormData();
var xhr = new XMLHttpRequest();
formdata.append('upfile', upfile); //设置服务器端接收的name为upfile
xhr.open("post","");
xhr.onreadystatechange = function(){
if(this.readyState==){
if(this.status==){ //上传成功
var resultText = this.responseText;
console.info(resultText);
//转json
var jsonObj = JSON.parse(resultText);
console.info(jsonObj);
if(jsonObj.success){
//var oUl = document.getElementById('ul1');
//var oLi = document.createElement('li');
//var oSpan = document.createElement('span');
//oSpan.innerHTML = jsonObj.res +"&nbsp;&nbsp;&nbsp;刚才上传";
//oLi.appendChild(oSpan);
//oUl.insertBefore(oLi, oUl.children[0]);
//刷新
window.location.reload(); }
}else{
alert('上传失败,请使用另一种方式上传');
}
}
} xhr.send(formdata);
}
}
function upload(e){
var upfile = e.files[];
var formdata = new FormData();
var xhr = new XMLHttpRequest();
formdata.append('upfile', upfile); //设置服务器端接收的name为upfile
xhr.open("post","");
xhr.onreadystatechange = function(){
if(this.readyState==){
if(this.status==){ //上传成功
var resultText = this.responseText;
//转json
var jsonObj = JSON.parse(resultText);
console.info(jsonObj);
if(jsonObj.success){
//刷新
window.location.reload(); }
}
}
}
xhr.send(formdata);
}
</script>
<div><a href="/share">返回总目录</a>&nbsp;&nbsp;-&nbsp;&nbsp;本目录文件</div>
<ul id="ul1" > {{range $i, $v := .Files}}
<li style="line-height:200%">
<span>&nbsp;{{$v.Name}}&nbsp;&nbsp;&nbsp;</span>
<span>&nbsp;{{$v.Date}}&nbsp;&nbsp;&nbsp;</span>
{{if $.FlagAllowDel}}
<span>&nbsp;<a href='#' onclick="del({{$v.Url}})" >删除</a>&nbsp;&nbsp;&nbsp;</span>
{{else}}
<span>&nbsp;<a href={{$v.Url}} download={{$v.Name}}>下载</a>&nbsp;&nbsp;&nbsp;</span>
{{end}}
</li>
{{end}}
</ul>
<script type="text/javascript">
function del(path){
//alert(path);
var formdata = new FormData();
var xhr = new XMLHttpRequest();
formdata.append('path', path); //设置服务器端接收
xhr.open("post","");
xhr.onreadystatechange = function(){
if(this.readyState==){
if(this.status==){ //成功
window.location.reload();
}
}else{
//alert('删除失败');
}
}
xhr.send(formdata);
}
</script>
</body>
</html>

参考:https://blog.csdn.net/fyxichen/article/details/60570484

用go iris 写的一个网页版文件共享应用(webapp)的更多相关文章

  1. 自己写一个网页版的Markdown实时编辑器

    这几天忙着使用Python+Django+sqlite 搭建自己的博客系统,但是单纯的使用H5的TextArea,简直太挫了有木有.所以,就想模仿一下人家内嵌到网页上的Markdown编辑器,从而让自 ...

  2. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  3. [Backbone.js]如何用backbone写一个仿网页版微信的webapp?

    var Chat = Backbone.Model.extend({ idAttribute:'id', initialize:function(options){ var users = this. ...

  4. nodejs写的一个网页爬虫例子(坏链率)

    因为工作需要,用nodejs写了个简单的爬虫例子,之前也没用过nodejs,连搭环境加写大概用了5天左右,so...要多简陋有多简陋,放这里给以后的自己看~~ 整体需求是:给一个有效的URL地址,返回 ...

  5. CAD使用SetxDataLong写数据(网页版)

    主要用到函数说明: MxDrawEntity::SetxDataLong 写一个long扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据名称 n ...

  6. CAD使用SetxDataDouble写数据(网页版)

    主要用到函数说明: MxDrawEntity::SetxDataDouble 写一个Double扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据 ...

  7. CAD使用SetxDataString写数据(网页版)

    主要用到函数说明: MxDrawEntity::SetxDataString 写一个字符串扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据名称 ...

  8. 教你用纯Java实现一个网页版的Xshell(附源码)

    前言 最近由于项目需求,项目中需要实现一个WebSSH连接终端的功能,由于自己第一次做这类型功能,所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用,当时看到了很多这方面的项目,例如:Gat ...

  9. CAD使用SetXData写数据(网页版)

    主要用到函数说明: MxDrawEntity::SetXData 设置实体的扩展数据,详细说明如下: 参数 说明 [in] IMxDrawResbuf* pXData 扩展数据链表 js代码实现如下: ...

随机推荐

  1. Mathematically Hard LightOJ-1007(欧拉定理+前缀和)

    Description Mathematically some problems look hard. But with the help of the computer, some problems ...

  2. php 一些常用函数

    1.var_export() var_export — 输出或返回一个变量的字符串表示此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP ...

  3. 使用tqdm实现下载文件进度条

    1.获取下载链接 下载链接为:http://fastsoft.onlinedown.net/down/Fcloudmusicsetup2.5.5.197764.exe 2.使用tqdm实现 2.1.从 ...

  4. nginx代理 tomcat获得真实用户IP

    nginx代理 tomcat获得真实用户IP 2017年04月08日 21:34:17 cf 阅读数 1825更多 分类专栏: nginx html/js/ajax   版权声明:本文为博主原创文章, ...

  5. Spring实战(十三)Spring事务

    1.什么是事务(Transaction)? 事务是指逻辑上的一组操作,要么全部成功,要么全部失败. 事务是指将一系列数据操作捆绑成为一个整体进行统一管理.如果某一事务执行成功,则该事务中进行的所有数据 ...

  6. windows server 2008 R2 Enterprise 防火墙开启允许远程桌面登录

    解决方法: 开始------ > 运行 ----- > gpedit.msc 打开“本地组策略编辑器”,按如下设置:计算机配置----->管理模板----->网络-----&g ...

  7. mybatis如何接收字符串转换为date类型插入数据库

    今天遇到一个问题,先描述一下: 后台获取数据,有一个字段是时间字段,后台传过来的是字符串类型的,如:2016/11/16 10:26:17, 将该字符串放在map对象中(持久层用的是mybatis或者 ...

  8. vue项目 时间戳转 格式

    项目用了 element UI的日期插件,修改时 时间回显不了,打印出来是换行了,因此要转换 changeTime(value){ let date = new Date(value); let y ...

  9. python 小记

    判断一个数是奇数还是偶数 #!/usr/bin/env python3 #_*_coding:UTF-8_*_ def pan(num): ==: print( str(num) + ' is: 偶数 ...

  10. Django静态资源配置

    Settings文件设置 INSTALLED_APPS 设置 确保 django.contrib.staticfiles 添加到INSTALLED_APPS中 默认是已经添加上的 INSTALLED_ ...