AngularJS ajax同步问题（php版本图片上传）

AngularJS提供了一个内置Service $q，它提供了一种承诺/延后（promise/deferred），可以保证我们的调用代码一定能够拿到数据。当然，我们可以猜到，最后去服务器取数据的方式肯定是异步的。只不过这个服务提供了表面上是同步访问的API，当数据获取成功之后，自动将数据提供给调用的代码。

js 代码如下：

1. <script type="text/javascript" src="{$dj_path}dejia_js/Angular.min.js"></script> 
2. <script type="text/javascript"> 
3.     $("#inputfile").change(function(){ 
4.         var file = document.getElementById("inputfile").files[0]; 
5.         var fileer = new FileReader(); 
6.  
7.     var filee = document.getElementById("inputfile").value; 
8.     var isnext = false;  
9.     var fileend = filee.substring(filee.indexOf(".")); 
10.     var filetypes =[".jpg",".png",".gif",".jpeg"]; 
11.     for(var i =0; i<filetypes.length;i++){  
12.         if(filetypes[i]==fileend){  
13.             isnext = true;  
14.             break;  
15.         } 
16.     } 
17.     if(!isnext){  
18.         alert("只允许上传jpg|gif|png|jpeg格式的图片");  
19.         return false;  
20.     } 
21.  
22.         fileer.readAsDataURL(file); 
23.         fileer.onload = function(){ 
24.             var result = document.getElementById("fileimg"); 
25.             $("#addbg").fadeOut(); 
26.             result.innerHTML = '<img src="' + this.result +'" ng-init="tasks.myimg = ' + this.result +'" alt="" />'; 
27.         } 
28.     }); 
29.  
30.   
31.      var app =   angular.module('todolist',[]); 
32.     app.config(['$interpolateProvider', function($interpolateProvider) { 
33.       $interpolateProvider.startSymbol('{['); 
34.       $interpolateProvider.endSymbol(']}'); 
35.     }]); 
36.      
37.      
38.     // $q 是内置服务，所以可以直接使用   
39. app.factory('UserInfo', ['$http', '$q', function ($http, $q) {   
40.   return {   
41.     query : function(rest) {   
42.       var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行   
43.       $http({method: 'POST', url: 'consignment.php?act=img_pro',data:rest}).   
44.       success(function(data, status, headers, config) {   
45.         deferred.resolve(data);  // 声明执行成功，即http请求数据成功，可以返回数据了   
46.       }).   
47.       error(function(data, status, headers, config) {   
48.         deferred.reject(data);   // 声明执行失败，即服务器返回错误   
49.       });   
50.       return deferred.promise;   // 返回承诺，这里并不是最终数据，而是访问最终数据的API   
51.     } // end query   
52.   };   
53. }]);   
54.      
55.      
56.     app.controller('TaskCtrl',['$scope', 'UserInfo', function ($scope, UserInfo) { 
57.          
58.         $scope.tasks={biaoti:'',jiage:'',fenlei:'',myimg:'',url:'',miaoshu:''}; 
59.         $scope.lists=[]; 
60.         $scope.add=function(){ 
61.         $scope.error=""; 
62.         
63.         
64.         if(isNaN($scope.tasks.jiage)){ 
65.         $scope.error="价格必须为数字"; 
66.         }else{ 
67.             if($scope.tasks.biaoti == '' || $scope.tasks.jiage == ''|| $scope.tasks.fenlei == ''|| $scope.tasks.miaoshu == ''){ 
68.             $scope.error="列表中带 * 号的为必填项"; 
69.             }else{ 
70.  
71.             var imgasdd = $("#fileimg img").attr("src"); 
72.             if(imgasdd == null){ 
73.                 imgasdd = "images/no_pictureco.gif"; 
74.                 $scope.tasks.myimg = imgasdd; 
75.                 $scope.lists.push($scope.tasks); 
76.                 $("#fileimg img").attr("src","{$dj_path}dejia_images/addbg.gif"); 
77.                 $scope.tasks={biaoti:'',jiage:'',myimg:'',fenlei:'',url:'',miaoshu:''}; 
78.             }else{ 
79.                 popCenterWindow(); //显示等待框
80.                   
81.                  //我们定义的UserInfo服务   
82.                 var promise = UserInfo.query(imgasdd); // 同步调用，获得承诺接口   
83.                 promise.then(function(data) {  // 调用承诺API获取数据 .resolve  
84.                     $scope.tasks.myimg = data; 
85.                     $scope.lists.push($scope.tasks); 
86.                     $("#fileimg img").attr("src","{$dj_path}dejia_images/addbg.gif"); 
87.                     $scope.tasks={biaoti:'',jiage:'',myimg:'',fenlei:'',url:'',miaoshu:''}; 
88.                     closeWindow(); 
89.                 }, function(data) {  // 处理错误 .reject   
90.                     $scope.user = {error: '用户不存在！'};   
91.                 });   
92.                   
93.                  
94.  
95.             } 
96.              
97.             } 
98.         } 
99.         } 
100.          
101.          
102.     }]); 

php代码如下：

1. $rawpostdata = file_get_contents("php://input"); //获取AngularJS post过来的数据
2.     //$post = json_decode($rawpostdata, true); 
3.     require(ROOT_PATH .'includes/cls_image.php'); 
4.     $cls_image = new cls_image(); 
5.     if($rawpostdata){ 
6.               if (preg_match('/(?<=\/)[^\/]+(?=\;)/',$rawpostdata,$pregR)){ 
7.                   $streamFileType ='.' .$pregR[0];  
8.               } 
9.             $streamFileRand ='y'. date('YmdHis').rand(1000,9999); 
10.             $dir = UPLOAD.$user_id.'/consi/'; 
11.           /* 如果目标目录不存在，则创建它 */ 
12.             if (!file_exists($dir)) 
13.             { 
14.                 if (!make_dir($dir)) 
15.                 { 
16.                     exit('-1'); 
17.                 } 
18.             } 
19.             $streamFilename = $dir."".$streamFileRand .$streamFileType; 
20.             //处理base64文本，用正则把第一个base64,之前的部分砍掉 
21.             preg_match('/(?<=base64,)[\S|\s]+/',$rawpostdata,$streamForW); 
22.             if (file_put_contents($streamFilename,base64_decode($streamForW[0]))===false){ 
23.                 exit('-1'); 
24.             } 
25.  
26.             //上传180*180的图片 
27.             $mix = $cls_image->make_thumb($streamFilename,360,360,$dir); 
28.             exit($mix); 
29.     }else{ 
30.         exit('-1'); 
31.     }