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版)相关推荐

  1. html5 上传超大文件,HTML5教程 如何拖拽上传大文件

    本篇教程探讨了HTML5教程 如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...

  2. vue-simple-uploader实现多文件/文件夹以及可拖拽上传

    vue-simple-uploader的简单使用 1.效果图展示 2.安装 3.vue2使用(vue3使用会报错) 4.代码 vue-simple-uploader是基于simple-uploader ...

  3. 类似新浪微博和google图片的HTML5实现图片拖拽上传功能

    2019独角兽企业重金招聘Python工程师标准>>> 来源: http://www.lovesunlife.com/?p=315 这篇文章对google图片为蓝本就拖拽上传功能分析 ...

  4. js 拖拽上传文件夹

    需求 获取拖拽到指定元素上的文件夹中的文件,并需要知道相对地址. 项目地址 https://github.com/156ban/droped-file-and-folder-reader (服务器中运 ...

  5. js实现文件拖拽上传并显示待上传的文件列表

    此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...

  6. 实现拖拽上传文件的一款小控件——dropzone

    由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...

  7. Nodejs express、html5实现拖拽上传(转载)

    一.前言 文件上传是一 个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖 拽上传的需要的api.node ...

  8. vue+flask实现视频合成(拖拽上传)

    vue+flask实现视频合成 效果如下 欢迎访问博客代码哈士奇 技术 聊天 交流群 974178910 前端交流群 535620886 vue+flask实现视频合成 拖拽上传我们之前一个文章有写过 ...

  9. 拖拽上传技术-----html5[转载]

    原网址:http://blog.163.com/mongying_net/blog/static/35112712012345352226/ 拖拽上传应用主要使用了以下HTML5技术: Drag&am ...

最新文章

  1. 爱耳日腾讯天籁行动再升级 助力100位青年听障人才打破“屏障”
  2. unity, Shader.Find的一个坑
  3. putty遇到ctrl+s
  4. Django 07模型层—单表操作(增删改查)
  5. pytorch随笔-6
  6. 【Linux】一步一步学Linux——nice命令(127)
  7. 在命令提示符输出c语言代码_您可以在Windows命令提示符中更改输出缓冲区的大小吗?...
  8. OSL创始人登上美国知名电视节目宣传DeFi引关注
  9. VB用记录集填充表格函数
  10. 小米3c路由器拆机_小米AC2350无线路由器拆机-路由器交流
  11. 计算机一定要学五笔打字吗,学习五笔打字大概要多长时间
  12. MCAFEE卸载软件测试初学者,迈克菲卸载软件怎么用(手把手教你彻底卸载干净)...
  13. win7 IIS安装与配置
  14. 大数据产品推荐:Stratifyd大数据智能分析平台
  15. 爬虫中proxies小分享
  16. 解析|自动驾驶的核心技术是什么?
  17. 【转载】网络基础-华山论剑
  18. configure: error: GD build test failed. Please check the config.log
  19. 带你玩东方外传系列一 ~ 十游戏链接
  20. 《C语言程序设计》江宝钏主编-习题4-3-字母排序!!!

热门文章

  1. 十天学Linux内核之第九天---向内核添加代码
  2. chrome ui源码剖析-Accelerator(快捷键)
  3. RHEL6入门系列之二十七,源码安装及软件安装综合实例
  4. Sharepoint Caml查询中时间格式
  5. struts2标签集
  6. Linux零基础初级教程
  7. iframe内联元素有白边原因_教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性?
  8. SAP 月结F.19与GR/IR
  9. 什么是企业的固定资产全寿命周期管理
  10. 利润中心, 成本中心, 工作中心