一次只能传一个文件，需在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. 第9章：LeetCode--算法：HASH表

    哈希表(Hash table,也叫散列表),关键值K和内容的映射表,通过映射函数实现,hashtable(key,value) 进行查询的时候,就是使用哈希函数将关键码key转换为对应的数组下标,并定 ...

  2. 购物车以php原生cookie实现

    index.php //入口文件 <?php /** * @name index.php * @decs * @author 老猫 <18368091722@163.com> * U ...

  3. T100——q查询，子母查询（汇总——明细）练习笔记

    范例: 代码: #add-point:input段落 name="ui_dialog.input" INPUT BY NAME g_master.bdate,g_master.ed ...

  4. c#调用带用户名密码验证的wsdl

    之前记录过一篇添加带验证的webservice,但是公司的另一个项目是.net framework2.0的项目,没有服务引用,只能添加web引用. 现在记录和分享一下方法: 先添加web引用,选择ws ...

  5. ubuntu14.04 x86编译upx 3.92 及so加固

    的参考文章: http://www.cnblogs.com/fishou/p/4202061.html 1.download upx和所依赖的组件 upx3.:https://www.pysol.or ...

  6. spring整合shiro配置BUG，Tomcat启动不了:Error during artifact deployment. See server log for details

    现象 spring配置shiro权限控制之后,项目无法启动 [2019-08-09 09:00:35,800] Artifact export_web_manager:war exploded: Er ...

  7. Redis-Hash常用命令

    Redis-Hash常用命令 hset key field value 设置一个散列,但是在散列中一次只能设置一个属性,如果要批量设置多个属性,则需要使用 hmset命令 hget key field ...

  8. vue-element-admin 多层路由问题

    在二级页面上添加<router-view> 关于页面打包后三级路由无法访问问题 需要将 存放router-view 的页面单独存放一个文件夹 router.js 写法

  9. docker一键搭建Nginx+PHP环境(含自动部署命令)

    文章的主要部分是一步一步的教程,文章的最后是我整理好的一键安装命令,自动下载并安装docker,构建镜像,启动容器集群(压缩包内注释覆盖范围达到80%) 大家可以看完教程亲自尝试下,也可以直接执行一键 ...

  10. Win7系统开机速度慢怎么解决？

    Win7系统使用时间长了,我们就会发现电脑的开机启动速度变慢了,其实除了关闭相应的启动项之外,我们还可以对电脑进行相关的系统配置,来使电脑能够更加快速的启动.下面好系统重装助手就来告诉你怎么解决Win ...