一次只能传一个文件，需在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. Zero Array---思维题

    链接        submit B. Zero Array time limit per test 1 second memory limit per test 256 megabytes inpu ...

  2. LeetCode 203——移除链表（JAVA）

    删除链表中等于给定值 val 的所有节点. 示例: 输入: 1->2->6->3->4->5->6, val = 6 输出: 1->2->3->4 ...

  3. 利用requests提交相同名称数据的处理方法

    #字典键不能重复 data={ boardid' : boardid, 'divids[ ]' : '0' , 'divids[ ]' : '1' , 'divids[ ]' : '2' , } #这 ...

  4. CSS——font使用方法

    <style> p{ /*font-style: italic;/*设置字体为斜体*/ font-variant: small-caps; font-weight: bolder;/*设置 ...

  5. C#面向对象9 字符串

    1.字符串的不可变性 当你给一个字符串重新赋值之后,老的值并没有销毁,而是重新开辟了一块空间(堆)存储新的值. **当程序结束后,GC扫描整个内存,如果发现有的空间没有被指向,则立即把它销毁. 示意图 ...

  6. 对接外网post，get接口封装类库

    public class HttpHelper { public static string GetAsync(string url)  { HttpWebRequest request = WebR ...

  7. 【ES6 】const命令

    本质 const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动. 对于简单类型的数据(数值.字符串.布尔值),值就保存在变量指向的那个内存地址,因此等同于常量. ...

  8. O063、NFS Volume Provider（Part II）

    参考https://www.cnblogs.com/CloudMan6/p/5693771.html   本节开始创建 NFS volume ,操作方法和 LVM volume一样,唯一的区别是在 v ...

  9. 【转】CnBlogs自定义博客样式

    文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...

  10. HTML5之历史记录（实现的当页面应用路由器的底层）

    history hashchange与popstate 一.history history.back():加载history列表中的前一个URL history.forward():加载history ...