這篇文章主要介紹了angularjs客戶端實現壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下

主要是利用html5的canvas來進行圖片的壓縮,然后轉化為dataURL，再有dataURL轉化為Blob文件，Blob對象可以直接賦值給Formdata.

1. app.service('Util', function($q) { 
2. var dataURItoBlob = function(dataURI) { 
3. // convert base64/URLEncoded data component to raw binary data held in a string 
4. var byteString; 
5. if (dataURI.split(',')[0].indexOf('base64') >= 0) 
6. byteString = atob(dataURI.split(',')[1]); 
7. else 
8. byteString = unescape(dataURI.split(',')[1]); 
9.  
10. // separate out the mime component 
11. var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
12.  
13. // write the bytes of the string to a typed array 
14. var ia = new Uint8Array(byteString.length); 
15. for (var i = 0; i < byteString.length; i++) { 
16. ia[i] = byteString.charCodeAt(i); 
17. } 
18.  
19. return new Blob([ia], { 
20. type: mimeString 
21. }); 
22. }; 
23.  
24. var resizeFile = function(file) { 
25. var deferred = $q.defer(); 
26. var img = document.createElement("img"); 
27. try { 
28. var reader = new FileReader(); 
29. reader.onload = function(e) { 
30. img.src = e.target.result; 
31.  
32. //resize the image using canvas 
33. var canvas = document.createElement("canvas"); 
34. var ctx = canvas.getContext("2d"); 
35. ctx.drawImage(img, 0, 0); 
36. var MAX_WIDTH = 800; 
37. var MAX_HEIGHT = 800; 
38. var width = img.width; 
39. var height = img.height; 
40. if (width > height) { 
41. if (width > MAX_WIDTH) { 
42. height *= MAX_WIDTH / width; 
43. width = MAX_WIDTH; 
44. } 
45. } else { 
46. if (height > MAX_HEIGHT) { 
47. width *= MAX_HEIGHT / height; 
48. height = MAX_HEIGHT; 
49. } 
50. } 
51. canvas.width = width; 
52. canvas.height = height; 
53. var ctx = canvas.getContext("2d"); 
54. ctx.drawImage(img, 0, 0, width, height); 
55.  
56. //change the dataUrl to blob data for uploading to server 
57. var dataURL = canvas.toDataURL('image/jpeg'); 
58. var blob = dataURItoBlob(dataURL); 
59.  
60. deferred.resolve(blob); 
61. }; 
62. reader.readAsDataURL(file); 
63. } catch (e) { 
64. deferred.resolve(e); 
65. } 
66. return deferred.promise; 
67.  
68. }; 
69. return { 
70. resizeFile: resizeFile 
71. }; 
72.  
73. }); 

由于目前angualrjs暫不支持通過multiform data上傳文件，所以利用如下的代碼可以上傳formdata里的文件

1. app.controller('CompanyCtrl', function($http, Util) { 
2.  
3. Util.resizeFile(input.files[0]).then(function(blob_data) { 
4. var fd = new FormData(); 
5. fd.append("imageFile", blob_data); 
6. $http.post('http://your.domain.com/upload', fd, { 
7. headers: {'Content-Type': undefined }, 
8. transformRequest: angular.identity 
9. }) 
10. .success(function(data) { 
11. $scope.model.company_pict = data[0]; 
12. }) 
13. .error(function() { 
14. console.log("uploaded error...") 
15. }); 
16. }, function(err_reason) { 
17. console.log(err_reason); 
18. }); 
19.  
20.  
21. }