一次只能传一个文件，需在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. 区间dp之 "石子合并"系列（未完结）

    A. 石子合并<1> 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统评测 方式:文本比较   题目描述 有N堆石子排成一排(n<=100),现要将石 ...

  2. Stardew Valley(星露谷物语)Mod开发之路 写在前面

    之前迷上了一款新游戏Stardew Valley,这几天发现游戏为插件开发提供了SMAPI编程接口,玩家可以方便的自定义游戏内容(瞬间感觉因缺思厅,额..),其实这几年的游戏许多都有mod机制,商家机 ...

  3. Ruby Rails学习中：注册表单，注册失败，注册成功

    接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...

  4. Neo4j Cypher语法（三）

    目录 5 函数 5.1 谓词函数 5.2 标量函数 5.3 聚合函数 5.4 列表函数 5.5 数学函数 5.6 字符串函数 5.7 Udf与用户自定义函数 6 模式 6.1 索引 6.2 限制 7 ...

  5. 怎样创建并使用 vue 组件 (component) ?

    组件化开发 需要使用到组件, 围绕组件, Vue 提供了一系列功能方法, 这里仅记录组件的 最简单 的使用方法. 1. 通过 Vue.component(tagName, options) 注册一个 ...

  6. JavaScript例子1-给网页中所有<p>元素添加onclick事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. O047、 Cinder 组件详解

    参考https://www.cnblogs.com/CloudMan6/p/5585637.html   cinder-api   cinder-api 是整个Cinder 组件的门户,所有cinde ...

  8. centos 配置mysql主从复制

    mysql+centos7+主从复制   MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公 ...

  9. elementui按需加载

    定义一个ele.js文件 官网:https://element.eleme.io/#/zh-CN/component/quickstart // 方法1 import 'element-ui/lib/ ...

  10. (๑•̀ㅂ•́)و✧QQ用户信息管理系统

    这是第二篇文章,就直接切主题 这次剖析的也是自己的作业之一:QQ信息管理系统 一:(此处省略了建Proarams类,其实目的只是想强调把连接语句单独放一个类里更容易调用,命名规范如图) 二:(导入SQ ...