关于上传带有图片的表单数据至服务器

最近在做一个商城的后台管理项目，项目中做到文件上传功能，上传到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对象，用常规方法发送请求。

以上是窝本人自己总结的一些思路，第一次写博客一些不足之处还请多多指出，日后改正。

谢谢！！