Ajax ajaxFileUpload文件上传同步代码js实现

需求描述：

此功能模块是我写的一个项目中的【气瓶定检信息模块】中用到的一个技术，在添加气瓶定检信息数据的同时需要添加4张不同类型的图片，【大家都知道图片是不能直接存数据库的所以这里需要先上传图片获得图片URL】然后把获得的图片URL与其它需要添加的数据的一起写入定检信息表；整个操作过程都是通过Ajax实现；当点击提交按钮时，Ajax与后台Controller交互得到图片URL,后再通过另一个Ajax与后台Controller交互添加数据到数据库；这个Ajax同步处理的技术，网上很多但都只能做参考对于新手来说没什么用；我这边直接上简洁的js 代码共新手使用；

用这个promise对象实现同步

【整个添加数据和上传图片都是通过多个Ajax实现，因Ajax是异步的所以我们需要用到promise技术来做成Ajax同步】

===========================================================================

先了解一下promise：（建议先百度了解一下）

done()、fail()、progress()分别注册resolved、rejected、pending状态下的回调函数。通过resolve()、reject()、notify()可以触发事先注册的回调函数。

============================================================================

一.btn1 按钮触发

$("#btn1").click(function(){ //按钮提交触发1.先创建$.Deferred()对象；有几个ajax就建几个var someAjaxDfd = $.Deferred();var ajax1Dfd = $.Deferred();var ajax2Dfd = $.Deferred();var ajax3Dfd = $.Deferred();2.通过这个$.Deferred()对象获得这个延迟对象的Promise// 返回这个延迟对象的Promise/*产品合格证*/var its_promise = $.when(someAjaxDfd);/*质量证书*/var its_promise1 = $.when(ajax1Dfd);/* 质量说明书*/var its_promise2 = $.when(ajax2Dfd);/* 使用说明书*/var its_promise3 = $.when(ajax3Dfd);3.将延迟对象的Promise传入对应的ajax方法中 /*产品合格证*///此方法是第一个运行ajax方法ProductqualifyurlFileUpload(someAjaxDfd); its_promise.done(function () { /*质量证书*///上个方法结束后第二个运行ajax方法qualitycertificateurlFileUpload(ajax1Dfd);});its_promise1.done(function () {/* 质量说明书*/ //上个方法结束后第三个运行ajax方法ManufacturingSupervisionInsurFileUpload(ajax2Dfd);});its_promise2.done(function () {/* 使用说明书*//上个方法结束后第四个运行ajax方法instructionmanualurlFileUpload(ajax3Dfd);});its_promise3.done(function () { /*定检信息数据写入*///上个方法结束后第五个运行ajax方法createGasCylinderchkInfo(cph);});}}

============================================================================

二.写Ajax 方法

4.在ajax方法success: function ()；中；加someAjaxDfd.resolve();这个方法表示此ajax执行成功

/*产品合格证*/function ProductqualifyurlFileUpload(someAjaxDfd) {/*产品合格证*/$.ajaxFileUpload({ //上传图片的Ajaxurl: "/config/create-AllGasCylinderCheckInfoProductqualifyurlFileUpload",fileElementId: 'productqualifyurlFile1',dataType: "json",success: function (data){someAjaxDfd.resolve(); //此对象方法就是代表ajax是执行完成；},error: function () {}});}

----------------------------------------------------------------------------------------------------------------------------------

/*质量证书*/

function qualitycertificateurlFileUpload(ajax1Dfd) {/*质量证书*/$.ajaxFileUpload({//上传图片的Ajaxurl: "/config/create-AllGasCylinderCheckInfoqualitycertificateurlFileUpload",fileElementId: 'qualitycertificateurlFile2',dataType: "json",/*async: false,*/success: function (data) {ajax1Dfd.resolve();//此对象方法就是代表ajax是执行完成；},error: function () {DJMask.msg("请图片上传失败");}});}

----------------------------------------------------------------------------------------------------------------------------------

/* 质量说明书*/

function ManufacturingSupervisionInsurFileUpload(ajax2Dfd) {/* 质量说明书*/$.ajaxFileUpload({//上传图片的Ajaxurl: "/config/create-AllGasCylinderCheckInfoManufacturingSupervisionInsurFileUpload",fileElementId: 'manufacturingSupervisIoninsurFile2',dataType: "json",success: function (data) {ajax2Dfd.resolve();//此对象方法就是代表ajax是执行完成；},error: function () {DJMask.msg("请图片上传失败");}});}----------------------------------------------------------------------------------------------------------------------------------/* 使用说明书*/function instructionmanualurlFileUpload(ajax3Dfd) {/* 使用说明书*/$.ajaxFileUpload({//上传图片的Ajaxurl: "/config/create-AllGasCylinderCheckInfoinstructionmanualurlFileUpload",fileElementId: 'instructionmanualurlFile2',dataType: "json",success: function (data)ajax3Dfd.resolve();//此对象方法就是代表ajax是执行完成；},error: function () {DJMask.msg("请图片上传失败");}});}

----------------------------------------------------------------------------------------------------------------------------------

/*定检信息数据写入*/

createGasCylinderchkInfo（cph）{ //以上Ajax都执行结束后最后执行Ajax$.ajax({//添加数据的Ajaxtype: "POST",dataType: "json",url: "/config/add-GasCylinderCheckInfo",//urldata: $("#stuForm").serialize(),success: function (data) {console.log("ajax:" + data);if (data.resultCode == 200) { //状态码$("#messageValue").val(data.failDesc);$("#btn2").click(); //触发按钮（此块内容与Ajax同步无关）}if (data.resultCode == 502){//状态码$("#messageValue").val(data.failDesc);$("#btn3").click();//触发按钮（此块内容与Ajax同步无关）}if (data.resultCode == 505){//状态码$("#messageValue").val(data.failDesc);$("#btn3").click();//触发按钮（此块内容与Ajax同步无关）};},error: function () {$("#messageValue").val("系统异常操作不成功！\n");$("#btn3").click();//触发按钮（此块内容与Ajax 同步无关）}});}