我使用七牛是因為我懶得管理圖片，也懶得處理圖片縮放之類的東西。

最主要的，感覺用七牛逼格比較高。

傻瓜式的順序：注冊七牛賬號->實名認證->充值10塊錢->開始使用

這時候你去個人中心->密鑰管理，可以看到AK和SK兩個值，這兩個值是七牛確認是誰在上傳圖片，也就是確認身份用的，所以千萬不要給心懷不軌的人看到。

圖片上傳應該都需要以下幾件事：

1.用戶選擇想要上傳的圖片

2.預覽圖片

3.上傳圖片

4.提交表單

5.后臺確認表單提交成功，將已上傳的圖片標記為永存。

上傳圖片是指把圖片上傳到七牛，提交表單是把圖片地址保存到數據庫，這樣可以給自己的網站省很大一部分帶寬

可能是我沒有深入的了解七牛上傳圖片的機制，我發現七牛并不能先暫時緩存圖片，然后提交表單以后再確認保存。

因此我自己用了一個笨方法，創建兩個空間，一個空間用來緩存，另一個空間用做真正的保存。

具體的步驟是：

1.用戶選擇圖片

2.預覽圖片

3.用戶點擊提交表單

4.上傳圖片（把圖片上傳到緩存空間，并標記緩存一天）

5.上傳成功后提交表單

6.后臺將緩存中的圖片復制一份到真正的空間中，復制成功后刪除緩存圖片（不用管是否刪除成功，大不了緩存一天）

根據步驟， 一點一點來，完成前三步需要后端提供一個七牛生成的token，還有前端的plupload方法

首先是后臺如何生成七牛token？

我不告訴你，自己去看文檔吧，我覺得這個很簡單，但是記住了，給前端生成的token要標注緩存1天，也就是24小時以后要刪除。

然后是前端的代碼

你去看看七牛對JavaScript的文檔，然后我給你一個函數，看不懂留言

?

[javascript]?view plaincopy

1. /*設置Qiniu.uploader對象參數*/??
2. function?setOption(parent,?button,?last,?token){??
3. ????return?{??
4. ????????runtimes:?'html5,flash,html4',????//上傳模式,依次退化??
5. ????????container:?parent,???????????//上傳區域DOM?ID，默認是browser_button的父元素，??
6. ????????drop_element:?parent,????????//拖曳上傳區域元素的ID，拖曳文件或文件夾后可觸發上傳??
7. ????????browse_button:?button,???????//上傳選擇的點選按鈕，**必需**??
8. ????????uptoken_url:?'/web/qiniu/getsdk',????????????//Ajax請求upToken的Url，**強烈建議設置**（服務端提供）??
9. ????????uptoken?:?token,?//若未指定uptoken_url,則必須指定?uptoken?,uptoken由其他程序生成??
10. ????????//?save_key:?true,???//?默認?false。若在服務端生成uptoken的上傳策略中指定了?`sava_key`，則開啟，SDK會忽略對key的處理??
11. ????????domain:?'http://ofc0yhzbv.bkt.clouddn.com/',???//bucket?域名，下載資源時用到，**必需**??
12. ????????get_new_uptoken:?false,??//設置上傳文件的時候是否每次都重新獲取新的token??
13. ????????max_file_size:?'10mb',???????????//最大文件體積限制??
14. ????????flash_swf_url:?'js/plupload/Moxie.swf',??//引入flash,相?對路徑??
15. ????????max_retries:?3,???????????????????//上傳失敗最大重試次數??
16. ????????dragdrop:?true,???????????????????//開啟可拖曳上傳??
17. ????????chunk_size:?'10mb',????????????????//分塊上傳時，每片的體積??
18. ????????auto_start:?false,?????????????????//選擇文件后自動上傳，若關閉需要自己綁定事件觸發上傳??
19. ????????unique_names:?true,??????//設置所有文件名唯一??
20. ????????filters:?{??
21. ????????????mime_types?:?[?//只允許上傳圖片??
22. ????????????????{?title?:?"Image?files",?extensions?:?"jpg,jpeg,gif,png"?},??
23. ????????????],??
24. ????????????prevent_duplicates?:?false?//不允許選取重復文件??
25. ????????},??
26. ????????deleteAfterDays:'',??
27. ????????init:?{??
28. ????????????'FilesAdded':?function(up,?files)?{??
29. ????????????????//?設置預覽圖地址??
30. ????????????????var?img?=?new?o.Image();??
31. ????????????????img.onload?=?function?(){??
32. ????????????????????$("#"?+?button).attr('src',?this.getAsDataURL());??
33. ????????????????}??
34. ????????????????img.load(files[0].getSource());??
35. ????????????????//?開始上傳按鈕??
36. ????????????????$("#"?+?button?+?"_start").click(function(){?up.start();?});??
37. ????????????????plupload.each(files,?function(file)?{??
38. ????????????????????//?如果上傳文件大于1?ps：第一個文件上傳的時候用戶選擇第二個文件??
39. ????????????????????//?這時隊列大于1，隊列的第一個文件是正在上傳的，第二個是新選的??
40. ????????????????????if?(up.files.length?>?1)?{??
41. ????????????????????????//?移除當前隊列里第一個文件??
42. ????????????????????????up.removeFile(up.files[0]);??
43. ????????????????????}??
44. ????????????????????//?全局變量?根據變量控制不讓表單提前提交??
45. ????????????????????imgloading?=?true;??
46. ????????????????????//?文件添加進隊列后,處理相關的事情??
47. ????????????????});??
48. ????????????},??
49. ????????????'BeforeUpload':?function(up,?file)?{??
50. ????????????????//?每個文件上傳前,處理相關的事情??
51. ????????????????$("#"?+?button?+?"_uploading").click(function?()?{??
52. ????????????????????up.stop();??
53. ????????????????????$("#"?+?button?+?"_uploading").fadeOut();??
54. ????????????????});??
55. ????????????},??
56. ????????????'UploadProgress':?function(up,?file)?{??
57. ????????????????if($("#"?+?button?+?"_uploading").length?<?1){??
58. ????????????????????return;??
59. ????????????????}??
60. ????????????????$("#"?+?button?+?"_uploading").show();??
61. ????????????????$("#"?+?button?+?"_uploading").html(up.total.percent?+?"%（點擊取消）");??
62. ???????????????????//?每個文件上傳時,處理相關的事情??
63. ????????????},??
64. ????????????'FileUploaded':?function(up,?file,?info)?{??
65. ????????????????var?domain?=?up.getOption('domain');??
66. ????????????????var?res?=?$.parseJSON(info);??
67. ????????????????var?sourceLink?=?domain?+?res.key;?//獲取上傳成功后的文件的Url??
68. ????????????????//?設置圖片名稱??
69. ????????????????$("#"?+?button?+?"_input").val(res.key);??
70. ????????????????//?進度更新為上傳完成??
71. ????????????????$("#"?+?button?+?"_uploading").html("上傳完成");??
72. ????????????????$("#"?+?button?+?"_uploading").unbind();??
73. ????????????????//?圖片上傳后執行事件??
74. ????????????????//?eval(last+"()");??
75. ????????????????last();??
76. ????????????},??
77. ????????????'Error':?function(up,?err,?errTip)?{??
78. ????????????????alert("目前只支持圖片格式：jpg,jpeg,gif,png");??
79. ???????????????????//上傳出錯時,處理相關的事情??
80. ????????????},??
81. ????????????'UploadComplete':?function()?{??
82. ???????????????????//隊列文件處理完畢后,處理相關的事情??
83. ????????????},??
84. ????????}??
85. ????};??
86. }??

通過這個函數，可以點擊圖片選擇圖片，然后預覽，上傳，上傳成功后提交表單

?

提交表單以后，事情就簡單多了，后臺轉存圖片，然后刪除緩存圖片，bingo。

圖片上傳就搞定了，如果大家想做異步上傳，也可以，不過如果做異步上傳的話。。。是會有問題的，具體什么問題，有心人可以來問我。

作者：http://blog.csdn.net/shuzipai/article/details/52874383

轉載于:https://www.cnblogs.com/duyanming/p/6841966.html

總結

以上是生活随笔為你收集整理的七牛上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。