文件的上传和下载

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. css 序

    盒模型 1.属性:width :内容的宽度 书写内容的宽度 height:内容的高度 书写内容的宽度 padding:内边框 内容到边框的距离  可以有  background-color borde ...

  2. sed和awk练习及知识点

    一.针对/etc/passwd操作 1.sed操作,将文件中的第九行至第十五行复制到第16行下. [root@ns1 lianxi]# sed '9,15H;16G' /etc/passwd 2.用a ...

  3. 复杂模拟 | 1017 模拟N个顾客M个柜台进行排队

    #include <stdio.h> #include <memory.h> #include <math.h> #include <string> # ...

  4. 【微信小程序】小程序中的函数节流

    大ga吼! 很久没写博客咯,今天学到了一点新知识, 记录分享一下~ 摘要: 小程序中的函数节流 场景: 从商城列表进入商品详情中时,或者生成,提交订单, 付款的时候, 若用户快速点击(一秒8键,母胎s ...

  5. c#中怎样取得某坐标点的颜色

    // x,y 分别为x轴,y轴坐标 返回System.Drawing.Color 可以直接显示 public System.Drawing.Color GetPixelColor(int x, int ...

  6. PHP curl cookie不识别

    PHP curl cookie不识别 所以curl的时候别用setcookie 用了也没用

  7. Obloq模块:基于ESP8266的物联网模块

    OBLOQ 物联网模块 OBLOQ模块是DFRobot公司开发的一款基于ESP8266芯片的物联网通信模块.模块使用串口(TTL UART)和Arduino(或者其他单片机)通信,支持MQTT,HTT ...

  8. QT 随笔目录

    [1]基础部分 <信号和槽机制> <信号与槽知识点> <QString 与 string转换> <QT 继承QWidget && 继承QDia ...

  9. 《 .NET并发编程实战》阅读指南 - 第4章

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  10. 【IntelliJ IDEA】idea部署服务到Tomcat的工作原理

    参考地址: https://blog.csdn.net/qq_41116058/article/details/81435084 为什么idea部署服务到tomcat时候,一定要修改Applicati ...