go语言接收html上传的文件,html5原生js拖拽上传(golang版)
package main
import ("fmt"
"io"
"net/http"
"os")const(
upload_pathstring = "./upload/")//上传
func uploadHandle(w http.ResponseWriter, r *http.Request) {if r.Method == "GET"{
io.WriteString(w, tpl)
}else{//获取文件内容 要这样获取
file, head, err := r.FormFile("upfile")
fmt.Println(file)if err !=nil {
fmt.Println(err)return}
defer file.Close()//创建文件
fW, err := os.Create(upload_path +head.Filename)if err !=nil {
fmt.Println("文件创建失败")return}
defer fW.Close()
_, err=io.Copy(fW, file)if err !=nil {
fmt.Println("文件保存失败")return}
fmt.Println(w, head.Filename+"保存成功")//io.WriteString(w, head.Filename+" 保存成功")//http.Redirect(w, r, "/success", http.StatusFound)//io.WriteString(w, head.Filename)
}
}
func main() {
fmt.Println("OK!请访问 :8080/upload")//启动一个http 服务器
http.HandleFunc("/upload", uploadHandle)
err := http.ListenAndServe(":8080", nil)if err !=nil {
fmt.Println("服务器启动失败")return}
}var tpl = `
drag file
uuz.οndragenter=function(e){
e.preventDefault();
}
uuz.οndragοver=function(e){
e.preventDefault();this.innerHTML = '请松开';
}
uuz.οndragleave=function(e){
e.preventDefault();this.innerHTML = '请拖入要上传的文件';
}
uuz.οndrοp=function(e){
e.preventDefault();var upfile = e.dataTransfer.files[0]; //获取要上传的文件对象(可以上传多个)
alert(upfile.name)
alert(upfile.type)var formdata = newFormData();var xhr = newXMLHttpRequest();
formdata.append('upfile', upfile); //设置服务器端接收的name为upfile
xhr.open("post","upload");
xhr.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){ //上传成功
var resultText = this.responseText;
console.info(resultText);//转json
var jsonObj =JSON.parse(resultText);
console.info(jsonObj);if(jsonObj.success){//生成input表单
var fileId =createInput(jsonObj.uuid);//生成显示名称
appendFile1(fileId,upfile.name);
}
}else{
alert('上传失败,请使用另一种方式上传');
}
}
}
xhr.send(formdata);
}
}
`
go语言接收html上传的文件,html5原生js拖拽上传(golang版)相关推荐
- html5 上传超大文件,HTML5教程 如何拖拽上传大文件
本篇教程探讨了HTML5教程 如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
- vue-simple-uploader实现多文件/文件夹以及可拖拽上传
vue-simple-uploader的简单使用 1.效果图展示 2.安装 3.vue2使用(vue3使用会报错) 4.代码 vue-simple-uploader是基于simple-uploader ...
- 类似新浪微博和google图片的HTML5实现图片拖拽上传功能
2019独角兽企业重金招聘Python工程师标准>>> 来源: http://www.lovesunlife.com/?p=315 这篇文章对google图片为蓝本就拖拽上传功能分析 ...
- js 拖拽上传文件夹
需求 获取拖拽到指定元素上的文件夹中的文件,并需要知道相对地址. 项目地址 https://github.com/156ban/droped-file-and-folder-reader (服务器中运 ...
- js实现文件拖拽上传并显示待上传的文件列表
此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...
- 实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
- Nodejs express、html5实现拖拽上传(转载)
一.前言 文件上传是一 个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖 拽上传的需要的api.node ...
- vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成 效果如下 欢迎访问博客代码哈士奇 技术 聊天 交流群 974178910 前端交流群 535620886 vue+flask实现视频合成 拖拽上传我们之前一个文章有写过 ...
- 拖拽上传技术-----html5[转载]
原网址:http://blog.163.com/mongying_net/blog/static/35112712012345352226/ 拖拽上传应用主要使用了以下HTML5技术: Drag&am ...
最新文章
- 爱耳日腾讯天籁行动再升级 助力100位青年听障人才打破“屏障”
- unity, Shader.Find的一个坑
- putty遇到ctrl+s
- Django 07模型层—单表操作(增删改查)
- pytorch随笔-6
- 【Linux】一步一步学Linux——nice命令(127)
- 在命令提示符输出c语言代码_您可以在Windows命令提示符中更改输出缓冲区的大小吗?...
- OSL创始人登上美国知名电视节目宣传DeFi引关注
- VB用记录集填充表格函数
- 小米3c路由器拆机_小米AC2350无线路由器拆机-路由器交流
- 计算机一定要学五笔打字吗,学习五笔打字大概要多长时间
- MCAFEE卸载软件测试初学者,迈克菲卸载软件怎么用(手把手教你彻底卸载干净)...
- win7 IIS安装与配置
- 大数据产品推荐:Stratifyd大数据智能分析平台
- 爬虫中proxies小分享
- 解析|自动驾驶的核心技术是什么?
- 【转载】网络基础-华山论剑
- configure: error: GD build test failed. Please check the config.log
- 带你玩东方外传系列一 ~ 十游戏链接
- 《C语言程序设计》江宝钏主编-习题4-3-字母排序!!!