文件的上传和下载

1->文件的上传

文件的上传，采用的是uploadify.js这个插件.

本事例实现的是上传图片文件，其他的文件上传也一样。

2->文件的下载

文件的下载有两个实现的方式：

1->url路径指向文件的路径，浏览器自行下载。但此方法存在缺陷：图片文件，text，pdf等文件会在浏览器中自动显示，不会执行下载功能

2->使用gin 暂时没带有的下载方法

3>新建一个fileopt.go控制器,具体代码如下:

package controllers

import (

	"io"

	"log"

	"os"

	"fmt"

	"github.com/gin-gonic/gin"

	"net/http"

)

/**文件上传下载操作页面**/

func Fileopthtml(c *gin.Context){

	c.HTML(http.StatusOK, "fileopt.html", gin.H{

		"title": "GIN: 文件上传下载操作布局页面",

	})

}

/**上传方法**/

func Fileupload(c *gin.Context){

	//得到上传的文件

	file, header, err := c.Request.FormFile("image") //image这个是uplaodify参数定义中的   'fileObjName':'image'

	if err != nil {

		c.String(http.StatusBadRequest, "Bad request")

		return

	}

	//文件的名称

	filename := header.Filename

	fmt.Println(file, err, filename)

    //创建文件

	out, err := os.Create("static/uploadfile/"+filename)

	//注意此处的 static/uploadfile/ 不是/static/uploadfile/

	if err != nil {

		log.Fatal(err)

	}

	defer out.Close()

	_, err = io.Copy(out, file)

	if err != nil {

		log.Fatal(err)

	}

	c.String(http.StatusCreated, "upload successful")

}

/**下载方法**/

func Filedown(c *gin.Context){

	//暂时没有提供方法

}

　　

4>新建一个html页面,名为fileopt.html,其代码如下:

<!DOCTYPE html>

 

<html>

      <head>

        <title>首页 - 用户列表页面</title>

        <link rel="shortcut icon" href="/static/img/favicon.png" />

        <link rel="stylesheet" href="/static/uploadify/uploadify.css" rel="stylesheet"/>

        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 

        <script src="/static/uploadify/jquery.uploadify.min.js"></script>

      </head>    

    <body>

        <!--上传部分-->

        <form method="POST" action="/Home/UploadFile" enctype="multipart/form-data">

            <input type="file" name="image" id="file_upload">

            <div id="imgdiv" style="display:none;">

            </div>

        </form>

        <!--下载图片-->

        <button value="下载图片" onclick="download()">下载图片</button>

        <!--JS部分-->

       <script type="text/javascript">

        //页面的初始化

        $(function () {

            $("#file_upload").uploadify({       //绑定元素

            'fileObjName':'image',//html input标签的name属性的值吧。

            'debug':false,

            'auto':true,    //自动上传

            'multi':true,

            'removeCompleted':false, //上传完成以后是否保存进度条

            'buttonText':'选择文件',

            'cancelImg':'/static/uploadify/uploadify-cancel.png',

            'swf':'/static/uploadify/uploadify.swf', //必须设置  swf文件路径

            'uploader':'/home/fileuplaod',         //必须设置，上传文件触发的url

            'fileTypeDesc':'FileType',

            'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png;',

            'multi':true,

            'onUploadSuccess': function (file, data, response) {

               $("#imgdiv").show();

               var html='<image src="/static/uploadfile/'+file.name+'" style="height:150px;width:150px;margin:20px;"/>';

               $("#imgdiv").append(html);

            }

          });         

        });

        //下载图片

        function download(){

          //暂时没有提供后台的方法

          //gin暂时没有实现下载方法

          //只有使用url

          window.location.href="/static/img/1.jpg";

        }

  </script>

 </body>

</html>

　　

5>在路由中添加路由

package routers

import (

  "github.com/gin-gonic/gin"

  . "GinLearn/GinLearn/apis" //api部分

  . "GinLearn/GinLearn/controllers" //constroller部分

 )

func InitRouter() *gin.Engine{

  router := gin.Default()

  //Hello World

  router.GET("/", IndexApi)

  //渲染html页面

  router.LoadHTMLGlob("views/*")

  router.GET("/home/index", ShowHtmlPage)

  //列表页面

  router.GET("/home/list", ListHtml)

  router.POST("/home/PageData", GetDataList)

  router.POST("/home/PageNextData", PageNextData)

  //新增页面

  router.GET("/home/add", AddHtml)

  router.POST("/home/saveadd", AddPersonApi)

   //编辑页面

   router.GET("/home/edit", EditHtml)

   router.POST("/home/saveedit", EditPersonApi)

    //删除

    router.POST("/home/delete", DeletePersonApi)

    //Bootstrap布局页面

    router.GET("/home/bootstrap", Bootstraphtml)

    //文件的上传和下载

    router.GET("/home/fileopt", Fileopthtml)

    router.POST("/home/fileuplaod", Fileupload)

    router.GET("/home/filedown", Filedown)

    return router

 }

　　

6>项目的结构如下:

7>执行的效果如下:

1->文件操作的页面如下，路由如下:

2->点击选择文件按钮，选择需要上传的图片，点击打开按钮，效果如下:

3->点击下载图片按钮，浏览器下载一张指定的图片

8>下一章，将文件内容的读取。

Gin-Go学习笔记四：Gin-Web框架 文件的上传下载的更多相关文章

  1. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

  2. 基于struts2框架文件的上传与下载

    在开发一些社交网站时,需要有允许用户上传自己本地文件的功能,则需要文件的上传下载代码. 首先考虑的是文件的储存位置,这里不考虑存在数据库,因为通过数据库查询获取十分消耗资源与时间,故需将数据存储在服务 ...

  3. SSM框架之中如何进行文件的上传下载

    SSM框架的整合请看我之前的博客:http://www.cnblogs.com/1314wamm/p/6834266.html 现在我们先看如何编写文件的上传下载:你先看你的pom.xml中是否有文件 ...

  4. [原创]java WEB学习笔记72：Struts2 学习之路-- 文件的上传下载，及上传下载相关问题

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. Gin-Go学习笔记五：Gin-Web框架 文件的操作

    文件的操作 1>     文件的创建,删除,写入内容,读取内容.(此实例使用的是text文件) 2>     Gin 并没有提供文件的创建,删除,读写这个操作的专门的接口,所以采用的是常用 ...

  6. SpringMVC框架（四）文件的上传下载，上下文路径

    文件目录: SpringMVC配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...

  7. [iOS AFNetworking框架实现HTTP请求、多文件图片上传下载]

    简单的JSON的HTTP传输就不说了,看一个简单的DEMO吧. 主要明白parameters是所填参数,类型是字典型.我把这部分代码封装起来了,以便多次调用.也许写在一起更清楚点. #pragma m ...

  8. 初学Java Web(7)——文件的上传和下载

    文件上传 文件上传前的准备 在表单中必须有一个上传的控件 <input type="file" name="testImg"/> 因为 GET 方式 ...

  9. web操作文件的上传到服务器 并可下载 并且读取出来

    1.文件的上传-servlet实现文件上传---核心API—DiskFileItemFactory 一.文件上传概述 l  实现web开发中的文件上传功能,需完成如下二步操作: •    在web页面 ...

随机推荐

  1. Python之flask框架2

    Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档,大部分代码引用自官方文档. 安装flask 首先我们来安装F ...

  2. c# 第五节 第一个控制台程序、第一个桌面、快捷键、注释

    本节内容: 1:控制台程序的创建 2:第一个桌面程序 3:快捷键 4:注释 一.第一个控制台程序: 这就是控制台程序: 打开你的vs2015,按如下操作 二.第一个桌面程序 比如当我们删除一个东西会弹 ...

  3. 201871010136 -赵艳强《面向对象程序设计（java）》第十六周学习总结

    201871010136-赵艳强<面向对象程序设计(java)>第十六周学习总结   项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnbl ...

  4. JWT 学习资料

    学习资料 网址 官方网站 https://jwt.io/ debugger https://jwt.io/#debugger 相关的类库 https://jwt.io/#libraries (java ...

  5. 2019.6.11_MySQL进阶三：临时表

    临时表 临时表主要应用于保存一些临时数据.临时表只在当前连接可见.当关闭连接时,MySQL会自动删除表并且释放空间.临时表在MySQL 3.23版本中添加,低于 3.23版本就无法使用MySQL的临时 ...

  6. Mysql基础知识--概述和索引

    一.Mysql概述 MySQL原来隶属于MySQL公司,总部位于瑞典 2008.1.16MySQL被SUN公司收购 2009年SUN公司被Oracle公司收购 常见的软件版本 GA(general A ...

  7. nginx 缓存配置

    nginx 缓存是可以将远程服务器上的内容缓存到本地,可以设置缓存大小,缓存时间,缓存目录等等 具体配置如下 proxy_cache_path /home/http/cache/ levels=: k ...

  8. pycharm访问mysql数据库

    不需要像eclipse那样添加驱动包,在pycharm里面下载一个pymysql包即可. 然后链接自己电脑的mysql并进行访问即可. 源码如下(参考博客:https://blog.csdn.net/ ...

  9. 创建vector<T>容器

    vector<T> 容器是包含 T 类型元素的序列容器,和 array<T,N> 容器相似,不同的是 vector<T> 容器的大小可以自动增长,从而可以包含任意数 ...

  10. Golang（十一）TLS 相关知识（二）OpenSSL 生成证书

    0. 前言 接前一篇文章,上篇文章我们介绍了数字签名.数字证书等基本概念和原理 本篇我们尝试自己生成证书 参考文献:TLS完全指南(二):OpenSSL操作指南 1. OpenSSL 简介 OpenS ...