ajax圖片上傳及FastDFS入門案例.

今天來開始寫圖片上傳的功能, 如今的圖片上傳都講求 上傳完成後馬上回顯且頁面不刷新, 這裏究竟是怎麼作的呢? 固然是藉助於ajax了, 可是ajax又不能提交表單, 這裏咱們還要藉助一個插件: jquery.form.js
剩下的一個是FastDFS, 那麼什麼是FastDFS呢? 
FastDFS是一個開源的輕量級分佈式文件系統，由跟蹤服務器（tracker server）、存儲服務器（storage server）和客戶端（client）三個部分組成，主要解決了海量數據存儲問題，特別適合以中小文件（建議範圍：4KB < file_size <500MB）爲載體的在線服務。

這裏只來講FastDFS的優勢: 

解決了大容量存儲和負載均衡的問題。特別適合以文件爲載體的在線服務，如相冊網站、視頻網站等等。

FastDFS服務端有兩個角色：跟蹤器（tracker）和存儲節點（storage）。跟蹤器主要作調度工做，在訪問上起負載均衡的做用。
更多詳細內容能夠參考:http://blog.chinaunix.net/uid-20196318-id-4058561.html

一, 開發實例
0, 使用FastDFS:
首先須要在Linux下安裝且配置FastDFS, 這裏再也不贅述.
首先來看下引入的FastDFS jar包:

查看fdfs_client.conf配置文件:

咱們發現這裏面的設置不是咱們想要的, 那麼該怎麼辦呢? 咱們須要在本身工程中覆蓋一份:

配置文件內容以下:(這裏須要配置tracker_server)

 1 # connect timeout in seconds
 2 # default value is 30s
 3 connect_timeout=30
 4 
 5 # network timeout in seconds
 6 # default value is 30s
 7 network_timeout=60
 8 
 9 # the base path to store log files
10 base_path=/home/fastdfs
11 
12 # tracker_server can ocur more than once, and tracker_server format is
13 #  "host:port", host can be hostname or ip address
14 tracker_server=192.168.200.128:22122
15 #tracker_server=192.168.101.4:22122
16 
17 #standard log level as syslog, case insensitive, value list:
18 ### emerg for emergency
19 ### alert
20 ### crit for critical
21 ### error
22 ### warn for warning
23 ### notice
24 ### info
25 ### debug
26 log_level=info
27 
28 # if use connection pool
29 # default value is false
30 # since V4.05
31 use_connection_pool = false
32 
33 # connections whose the idle time exceeds this time will be closed
34 # unit: second
35 # default value is 3600
36 # since V4.05
37 connection_pool_max_idle_time = 3600
38 
39 # if load FastDFS parameters from tracker server
40 # since V4.05
41 # default value is false
42 load_fdfs_parameters_from_tracker=false
43 
44 # if use storage ID instead of IP address
45 # same as tracker.conf
46 # valid only when load_fdfs_parameters_from_tracker is false
47 # default value is false
48 # since V4.05
49 use_storage_id = false
50 
51 # specify storage ids filename, can use relative or absolute path
52 # same as tracker.conf
53 # valid only when load_fdfs_parameters_from_tracker is false
54 # since V4.05
55 storage_ids_filename = storage_ids.conf
56 
57 
58 #HTTP settings
59 http.tracker_server_port=80
60 
61 #use "#include" directive to include HTTP other settiongs
62 ##include http.conf

1, 在jsp中添加input標籤上傳圖片

這裏有一個隱藏域字段是imgUrl, 這裏是保存上傳圖片成功後返回的圖片地址, 在submit整個表單時, 將這個url地址保存到數據庫, 在list.jsp中直接取這個url就能夠回顯圖片數據了.

2, 添加上傳js 代碼:

這裏使用到了ajaxSubmit方法, 當咱們上傳圖片時其實是將表單提交了, 而後經過UploadPicController中的uploadPic方法去處理髮送的請求.


3, 構建uploadPicController.cs去解析uploadPic.do請求
Controller層:
UploadController.java:

 1  * 上傳圖片
 2  */
 3 @Controller
 4 @RequestMapping(value="/upload")
 5 public class UploadController {
 6  
 7     @Autowired
 8     private UploadService uploadService;
 9     
10     //上傳圖片品牌
11     @RequestMapping(value="/uploadPic.do")
12     public void uploadPic(@RequestParam(required=false) MultipartFile pic, HttpServletResponse response) throws Exception{
13         
14         //Java接口鏈接FastDFS
15         String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize());
16         
17         //path:group1/M00/00/01/wKjIgFWOYc6APpjAAAD-qk29i78248.jpg
18         //url:http://192.168.200.128 (Linux 虛擬機的ip地址)
19         String url = Constants.img_url + path;
20         
21         //Json工具類
22         JSONObject jo = new JSONObject();
23         jo.put("url", url);
24         jo.put("path", path);
25         
26         //返回json
27         response.setContentType("application/json;charset=UTF-8");
28         response.getWriter().write(jo.toString());
29     }
30 }

經過json的格式將url寫回到前端, 這樣在ajax請求中就能夠接收到參數並回顯圖片.

Service層:
UploadServiceImpl.java:

 1 /*
 2  * 上傳圖片
 3  */
 4 @Service("uploadService")
 5 public class UploadServiceImpl implements UploadService {
 6 
 7     //上傳
 8     public String uploadPic(byte[] pic, String name, long size){
 9         return FastDFSUtils.uploadPic(pic, name, size);
10     }
11 }

Common工具類:
FastDFSUtils.cs

 1 /*
 2  *上傳FastDFS圖片
 3  */
 4 public class FastDFSUtils {
 5 
 6     public static String uploadPic(byte[] pic, String name, long size){
 7         String path = null;
 8         //ClassPath下的文件Spring 
 9         ClassPathResource resource = new ClassPathResource("fdfs_client.conf"); 
10         try {
11             ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath());
12             //客服端
13             TrackerClient trackerClient = new TrackerClient();
14             TrackerServer trackerServer = trackerClient.getConnection();
15             
16             //鏈接小弟
17             StorageClient1 storageClient1 = new StorageClient1();
18             //擴展名, 獲取擴展名, apach 下common包中已有公用方法.
19             String extension = FilenameUtils.getExtension(name);
20             //設置圖片meta信息
21             NameValuePair[] meta_list = new NameValuePair[3];
22             meta_list[0] = new NameValuePair("filename", name);
23             meta_list[1] = new NameValuePair("fileext", extension);
24             meta_list[2] = new NameValuePair("filesize", String.valueOf(size));
25             //上傳且返回path 
26             path = storageClient1.upload_file1(pic, extension, meta_list);
27         } catch (Exception e) {
28             // TODO Auto-generated catch block
29             e.printStackTrace();
30         }
31         return path;
32     }
33 }

這裏是FastDFS的核心方法, 這裏將tracker比喻成老大,將storage比喻成小弟. 且爲這個圖片添加 一些meta信息, 最後調用upload_file1 將圖片上傳到圖片服務器且返回path.
整個開發流程就是這樣, 記錄於此 願往後回顧複習可以有更大的收穫.

 

===============2016/08/25 22:54 更新多圖片上傳:
上面咱們已經說到ajax請求異步上傳, 那麼這裏咱們再來講下多圖片上傳, 若是單張圖片上傳已經搞清楚的話,那麼單圖片上傳就顯得很簡單了.

首先咱們繼續來查看jsp頁面: 


這個js用來處理點擊上傳後作的事情, 其中回顯數據使用了從controller層接收回來的數據, 而後使用foreach進行遍歷, 那麼接下來咱們來看下controller層作的事情: 

 1 //上傳多張圖片
 2     @RequestMapping(value="/uploadPics.do")
 3     public @ResponseBody List<String> uploadPics(@RequestParam(required=false) MultipartFile[] pics, HttpServletResponse response) throws Exception{
 4         //多張圖片的路徑容器
 5         List<String> paths = new ArrayList<String>();
 6         
 7         for (MultipartFile pic : pics) {
 8             //Java接口鏈接FastDFS
 9             String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize());
10             paths.add(Constants.img_url+path);
11         }
12         
13         return paths;
14     }

使用foreach將圖片的url地址所有都裝載到一個list集合中, 而後返回給ajax請求函數.
Service層: 

1 @Service("uploadService")
2 public class UploadServiceImpl implements UploadService {
3 
4     //上傳
5     public String uploadPic(byte[] pic, String name, long size){
6         return FastDFSUtils.uploadPic(pic, name, size);
7     }
8 }

一切都仍是老樣子, 只不過 controller層和jsp都是用了foreach去遍歷, 並且jsp中多加了一個屬性: multiple="multiple". 僅此而已.