关于上传带有图片的表单数据至服务器
来源:互联网 发布:电子数据交换名词解释 编辑:程序博客网 时间:2024/06/07 13:07
最近在做一个商城的后台管理项目,项目中做到文件上传功能,上传到OSS阿里云服务器。
主要涉及到的技术点为 1:阿里云oss文件服务器上传;2:jquery.form.js;3:H5的fileReader文件预览功能 ;这个上传功能涉及到三次后台ajax请求,第一次需要传入用户的openid作为参数,请求回来一大堆参数。而后第二次文件(图片)上传时,需要把图片和之前传回来的数据再次作为参数发送至后台,完成文件上传功能;第二次图片上传至阿里服务器成功之后,会返回一个图片的id,此时拿到这个id,和其他的form里面的input输入框的数据一起作为参数传到自己的服务器后台,从而最终实现带有图片的数据表单提交功能。
现在我们细讲一下这三次ajax请求的逻辑。
第一次是比较简单的,单纯用一个openid作为参数传给后台,然后后台返回给你一大堆参数。注意这些参数是下面二次请求需要用的,所以我们要提前在图片上传的form表单中,再设置一些display为none的input标签,当我们拿到一次请求的参数的时候,可以把这些参数作为input的value值设置进去。为二次请求收集好数据。
接下来是二次ajax请求,之前的参数已经设置好了,在一个form表单中,此时我们需要做的是利用jquery.form.js这个插件,模拟form表单提交的功能,将图片和参数一起传至阿里云服务器,同时返回给你一个图片的id。注意二次ajax请求是设置在图片的input type=file这个表单的change事件中的,就是说用户change事件触发之后,才发送请求提交图片和其他参数。
最后是第三次ajax提交,此时我们已经拿到了前一次图片返回的id值,那么我们就可以把这个id值和其他的参数,利用ajax的data对象,用常规方法发送请求。
以上是窝本人自己总结的一些思路,第一次写博客一些不足之处还请多多指出,日后改正。
谢谢!!
- 关于上传带有图片的表单数据至服务器
- 带有图片预览功能的上传表单
- 带有图片预览功能的上传表单
- Android客户端上传数据到服务器:可以上传简单的表单,也可以方便的上传带有附件的文件
- 带有文件上传的表单数据写入到数据库中(表单带回显功能)
- java POI导出excel(带有图片的数据)以及ftp上传图片到另一台服务器的方法参考代码
- 图片+表单的上传
- 关于客户端上传图片和文字,服务器对上传的数据的接收和图片压缩处理
- 带有自定义图片的选择文件表单。
- 关于利用asi上传图片,服务器那边接收不到数据
- hibernate加ajax异步实现数据库中的新闻类别字段的获取,并且表单还是带有图片上传功能的
- ios表单提交(多个参数)数据到服务器,上传图片AFNetWorking
- 表单存在图片上传的情况 servlet表单图片上传
- Okhttp3表单上传数据到服务器使用指南
- Ajax上传带有普通input和文件的表单Form
- 使用 jquery.form.js插件上传带有附件的表单
- swift post表单上传图片和数据
- 关于UIButton里面带有图片的研究
- Maven+SpringMVC+Freemarker快速搭建
- 该怎么学习JSP???
- 数据链路层
- 《django book》part1---使用框架的好处
- 今日刷水题总结20171116
- 关于上传带有图片的表单数据至服务器
- 28.笔记 MySQL学习——其他创建表方式
- 例子---PHP实现网页计数器
- Vim查找替换及正则表达式的使用
- 试卷题目验证2
- 29.笔记 MySQL学习——使用分区表
- Python3.6下Django使用mysql
- 30.笔记 MySQL学习——删除表
- [成长] 退役?再见~OI