一次只能传一个文件，需在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. ARST第三周打卡

    Algorithm : 做一个 leetcode 的算法题 //二位数组查找 题目描述 //在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺 ...

  2. PAT A1012 Best Rank(25)

    题目描述 To evaluate the performance of our first year CS majored students, we consider their grades of ...

  3. PAT A1019 General Palindromic Number (20 分)

    AC代码 #include <cstdio> const int max_n = 1000; long long ans[max_n]; int num = 0; void change( ...

  4. 骨牌摆放方案数n*m（状压DP）

    题意:https://www.nitacm.com/problem_show.php?pid=1378 如题. 思路: 从第一行for到最后一行,枚举每一行的所有状态,进行转移,注意答案是dp[最后一 ...

  5. （转）关于Android中为什么主线程不会因为Looper.loop()里的死循环卡死？引发的思考，事实可能不是一个 epoll 那么 简单。

    ( 转载请务必标明出处:http://www.cnblogs.com/linguanh/, 本文出自:[林冠宏(指尖下的幽灵)的博客]) 前序 本文将会把一下三个问题阐述清楚以及一个网上的普遍观点的补 ...

  6. nginx部署vue前端，刷新出现404或者500错误的解决方案

    在nginx配置文件的server下加上 try_files $uri $uri/ /index.html; 不加的话是404,路径错误是500,这里的路径只要照着/index.html就行,不用加上 ...

  7. Spring实战（十三）Spring事务

    1.什么是事务(Transaction)? 事务是指逻辑上的一组操作,要么全部成功,要么全部失败. 事务是指将一系列数据操作捆绑成为一个整体进行统一管理.如果某一事务执行成功,则该事务中进行的所有数据 ...

  8. 04 Go语言之包

    1.为什么有包这个概念? 1)开发中,往往要在不同的文件中调用其他文件的函数 2)Go代码最小粒度单位是”包” 3)go的每一个文件都属于一个包,通过package管理 4)go以包的形式管理文件和项 ...

  9. js 的一些小技巧

    来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.确保数组的长度 在处理网格结构时,如果原始数据每行的长度不相等,就需要重新创建 ...

  10. oracle解锁

    --以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...