本教材由知了传课辛苦制作而成,仅供学习使用,请勿用于商业用途!如进行转载请务必注明出处!谢谢!

文件上传

一、form方式上传

1.前端

前端: <form action="/uploadFile" method="post" enctype="multipart/form-data"> 上传文件:<input type="file" name="upload_file"> <input type="submit" value="提交"> </form> 注意: 这里必须设置enctype="multipart/form-data",不然浏览器不会传送文件

2.后端

type Upload struct { beego.Controller } func (u *Upload)Get() { u.TplName = "upload_file.html" } func (u *Upload)Post() { // 获取上传的文件 f,h,err := u.GetFile("upload_file") if err != nil { fmt.Println(err) return } defer f.Close() // 生成时间戳,防止重名 timeUnix:=time.Now().Unix() // int64类型 time_str := strconv.FormatInt(timeUnix,10) // 将int64转为字符串 convert:转换 // 保存获取到的文件 err1 := u.SaveToFile("upload_file","static/upload/"+time_str+h.Filename) // 这里必须有这个路径才会保存成功, 否则报错:The system cannot find the path specified if err1 != nil{ fmt.Println(err1) } u.TplName = "index.tpl" } 注意: 相同文件名的文件会被后面上传的覆盖,可以使用时间戳重命名文件

二、ajax方式上传

前端

<script src="/static/js/jquery.min.js"></script> <form> <input type="file" name="uploadfile" id="uploadfile"> <input type="button" value="提交" id="btn"> </form> <script> var btn = document.getElementById("btn"); btn.onclick = function (ev) { var data = new FormData(); data.append("uploadfile", $("#uploadfile")[0].files[0]); $.ajax({ url: "/upload", type: "POST", data: data, contentType: false, processData: false, success:function (data) { } }) } </script>
  • processData 默认为true,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
  • contentType: false 不使用默认的application/x-www-form-urlencoded这种contentType
  • 分界符:目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置

  • ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符

1673人已阅读,今天你学习了吗?

添加新回复