一次只能传一个文件，需在main.go同级目录中建一个upload文件夹

main.go

package main

import (

    "fmt"

    "io"

    "net/http"

    "os"

)

const (

    upload_path string = "./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 = `<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>drag file</title>

</head>

<body>

    <div class="container">

        <div id="fileSpan" style="background-color:red;width:200px;height:200px"></div>

    </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 = '请松开';

    }  

     uuz.ondragleave = function(e){

         e.preventDefault();

         this.innerHTML = '请拖入要上传的文件';

     }  

     uuz.ondrop = function(e){

         e.preventDefault();  

         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","upload");

         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){

                         //生成input表单

                         var fileId = createInput(jsonObj.uuid);

                         //生成显示名称

                         appendFile1(fileId,upfile.name);

                     }

                 }else{

                     alert('上传失败,请使用另一种方式上传');

                 }

             }

         }  

         xhr.send(formdata);

     }

 }

    </script>

</body>

</html>`

html部分参考：https://blog.csdn.net/nanfang1105/article/details/77965915

如需跨域，可参考：https://blog.csdn.net/benben_2015/article/details/79247024

html5原生js拖拽上传（golang版）的更多相关文章

  1. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  2. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  3. Dropzone.js拖拽上传（简单示例）

    今天碰到一个需求,页面上有“点击上传”的按钮,点击可以执行上传事件,从桌面拖拽图片拖拽到任何地方,都可以执行上传,且不影响点击按钮事件.下面是简单示例: 简单示例如下: <!DOCTYPE ht ...

  4. HTML5——将图片拖拽上传

    如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Nodejs express、html5实现拖拽上传

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

  6. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  7. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  8. 原生API实现拖拽上传文件实践

    功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...

  9. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

随机推荐

  1. c++11特性

    0. 简介 在c++11标准中, 语言本身和标准库都增加了很多新内容. 里面的某些特性, 会让你在代码编写时更优雅. 我的环境: 系统: ubuntu16.04 g++版本: g++5.4.0 使用c ...

  2. Git 入门：概念、原理、使用

    出处: git入门:概念.原理.使用 git和Github 概念 Git --- 版本控制工具(命令). git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.git ...

  3. Mysql-Sqlalchemy-多表操作

    import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...

  4. Codeforces 1236A. Stones

    传送门 注意到两种操作都要消耗中间的石头,并且两种操作每次都会得到 $3$ 个石头 那么显然优先做操作二是最优的,因为操作二只会消耗中间堆的一个石头 如果有剩下再进行操作 $1$ ,那么可以保证总操作 ...

  5. 实现Banner广告图片轮换

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 解决sql "Compatibility_199_804_30003" 和 "SQL_Latin1_General_CP1_CI_AS" 之间的排序规则冲突。

    关联条件加  COLLATE Compatibility_199_804_30003

  7. WCF寄宿windows服务二

    如果有很多WCF服务需要寄宿,需要额外做一些工作:总体思路是:先把这些WCF服务的程序集打包,然后利用反射加载各个WCF服务的程序集,按顺序一个一个寄宿.先来看看我们需要寄宿的WCF服务: 实现步骤: ...

  8. 转：git常用操作

    转自:https://www.cnblogs.com/donghaojun/p/10906981.html 开发常用git指令:git init  # 初始化本地git环境 git clone xxx ...

  9. JavaScript笔记(2)

    函数 1.使用关键字function声明一个函数,如果需要传参数就传参,多个参数用逗号隔开,如果不需要传参数就不传 //函数声明 function name(num1,num2){ //方法体 } 2 ...

  10. & 位运算总结

    一.& 与  a & -a : 可以计算出 a 的二进制形式的第一个 1 出现的位置. eg: 6 & -6 = 0110 & 1010 = 0010