bootstrap-fileinput 配合oss使用教程

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 本教程使用的是bootstrap-fileinput v4.5.0和jquery-2.1.4,后台代码使用的是asp.net,实现bootstrap-fileinput提交文件到oss上

本教程使用的是bootstrap-fileinput v4.5.0和jquery-2.1.4,后台代码使用的是asp.net
代码:

  1. 直接使用以上代码会oss提交会出现以下错误:

    IncorrectNumberOfFilesInPOSTRequest
    POST requires exactly one file upload per request.
    5B6270FA17B51A8D536CDB3C
    ***.oss-cn-qingdao.aliyuncs.com
    
  2. 对比提交数据发现,该位置不对,应该改成“file”
    image001
  3. 查找fileinput.js文件中file_date,找到该位置,可以看到,把”file_date”改成”file”就可以了
    image003
  4. 修改完毕后,再次提交会出现一下错误,查找了下资料,发现,因为除了文件外oss上传还需要提交一些额外的参数,参数的位置在文件的后面就会出现一下情况,所以需要改下fileinput.js文件,使得uploadExtraData方法携带的参数出现在文件的前面
    InvalidArgument

The bucket POST must contain the specified 'key'. If it is specified, please check the order of the fields
5B62723D91D82BC5B78251E5
*.oss-cn-qingdao.aliyuncs.com
key

  1. 因此我们需要更改下_uploadSingle函数的末尾
    image005
  2. 并且需要更改一下_ajaxSubmit函数:
    image007
  3. 大功告成
    image009

源码地址为 https://gitee.com/lwq202/bootstrap-fileinput_oss
本文参考了https://www.cnblogs.com/newton/p/6066020.html

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
1月前
|
存储 监控 API
oss教程
oss教程
65 1
|
8月前
|
存储 编解码 前端开发
W3Cschool编程实战教程中BootStrap相关基础知识点总结
1、通过Bootstrap,我们只要给图片添加 img-responsive 的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。
38 0
|
4月前
|
编解码 前端开发 JavaScript
BootStrap 响应式布局技术教程简介
BootStrap 响应式布局技术教程简介
76 1
|
5月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
77 0
|
8月前
|
存储 弹性计算 缓存
【云存储】使用OSS快速搭建个人网盘教程(下)
【云存储】使用OSS快速搭建个人网盘教程(下)
657 0
|
8月前
|
存储 弹性计算 Linux
【云存储】使用OSS快速搭建个人网盘教程(上)
【云存储】使用OSS快速搭建个人网盘教程(上)
928 0
|
存储 域名解析 缓存
阿里云国际站对象存储OSS使用方法教程!
阿里云对象存储(Object Storage Service,简称OSS)是阿里云提供的云存储服务,同时提供四种存储方式,标准存储适用于移动应用、大型网站、图片分享或热点音视频,除了标准存储外还可以选择成本更低、存储期限更长的低频访问存储、归档存储和冷归档存储作为不经常访问数据的存储方式。
阿里云国际站对象存储OSS使用方法教程!
|
JSON JavaScript 前端开发
bootstrap3-typeahead 自动补全完美使用教程
displayText:直接说就是一个 function,默认为 item.name || item(用于获取从 Source 中得到的信息在字面上显示的内容,这个里面的值如果是有 item.name 属性就显示name属性,如果没有就直接显示 item ),回到Source描述中的 an array of JSON object..... 如果数组里面的数据时一个json,那么这个json必须有一个name属性,所以这个属性完全可以不叫name,甚至可以自己写一个function用于显示displayText
306 0
bootstrap3-typeahead 自动补全完美使用教程
|
前端开发 JavaScript
Bootstrap2【上手教程】
Bootstrap2【上手教程】
Bootstrap2【上手教程】