上傳圖片至fastdfs分散式檔案系統並回顯
阿新 • • 發佈:2018-12-01
事件,當我們瀏覽完圖片選中一張時,觸發onchange事件將圖片上傳到伺服器並回顯、
1 <img width="100" height="100" id="allUrl" src="${brand.imgUrl }"/> 2 <input type="hidden" name="imgUrl" id="imgUrl" value="${brand.imgUrl }"/> 3 <input type="file" name="pic" onchange="uploadPic()"/>
uploadPic()方法:
1 //上傳圖片 2 function uploadPic(){ 3 //jquery.form.js 4 var options = { 5 url : "/upload/uploadPic.do", 6 dataType : "json", 7 type : "post", 8 success : function(data){ 9 $("#allUrl").attr("src",data.url); 10 $("#imgUrl").val(data.url); 11 } 12 } 13 $("#jvForm").ajaxSubmit(options); 14 }
Springmvc配置上傳圖片
1 <!-- 圖片上傳 --> 2 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
FastDFS的Java介面使用
全域性配置檔案 fdfs_client.conf
# connect timeout in seconds # default value is 30s connect_timeout=30 # network timeout in seconds # default value is 30s network_timeout=60 # the base path to store log files base_path=/home/fastdfs # tracker_server can ocur more than once, and tracker_server format is # "host:port", host can be hostname or ip address tracker_server=119.29.146.187:22122 #tracker_server=119.29.146.187:22122 #standard log level as syslog, case insensitive, value list: ### emerg for emergency ### alert ### crit for critical ### error ### warn for warning ### notice ### info ### debug log_level=info # if use connection pool # default value is false # since V4.05 use_connection_pool = false # connections whose the idle time exceeds this time will be closed # unit: second # default value is 3600 # since V4.05 connection_pool_max_idle_time = 3600 # if load FastDFS parameters from tracker server # since V4.05 # default value is false load_fdfs_parameters_from_tracker=false # if use storage ID instead of IP address # same as tracker.conf # valid only when load_fdfs_parameters_from_tracker is false # default value is false # since V4.05 use_storage_id = false # specify storage ids filename, can use relative or absolute path # same as tracker.conf # valid only when load_fdfs_parameters_from_tracker is false # since V4.05 storage_ids_filename = storage_ids.conf #HTTP settings http.tracker_server_port=80 #use "#include" directive to include HTTP other settiongs ##include http.conf
工具類:FastDFSUtils
1 public class FastDFSUtil { 2 3 public static String uploadPic(byte[] pic ,String name,long size){ 4 String path = null; 5 //ClientGloble 讀配置檔案 6 ClassPathResource resource = new ClassPathResource("fdfs_client.conf"); 7 try { 8 ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath()); 9 //老大客戶端 10 TrackerClient trackerClient = new TrackerClient(); 11 TrackerServer trackerServer = trackerClient.getConnection(); 12 StorageServer storageServer = null; 13 StorageClient1 storageClient1 = new StorageClient1(trackerServer, storageServer); 14 String ext = FilenameUtils.getExtension(name); 15 16 NameValuePair[] meta_list = new NameValuePair[3]; 17 meta_list[0] = new NameValuePair("fileName",name); 18 meta_list[1] = new NameValuePair("fileExt",ext); 19 meta_list[2] = new NameValuePair("fileSize",String.valueOf(size)); 20 21 path = storageClient1.upload_file1(pic, ext, meta_list); 22 } catch (Exception e) { 23 e.printStackTrace(); 24 } 25 return path; 26 } 27 }
儲存圖片到FastDFS分散式檔案系統
1 @Service("uploadService") 2 public class UploadServiceImpl implements UploadService { 3 4 //上傳圖片 5 public String uploadPic(byte[] pic ,String name,long size) { 6 7 return FastDFSUtil.uploadPic(pic, name, size); 8 } 9 }
controller:
1 @Controller 2 public class UploadController { 3 4 @Autowired UploadService uploadService; 5 //上傳圖片 6 @RequestMapping(value="/upload/uploadPic.do") 7 public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response) throws IOException{ 8 9 String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize()); 10 String url = Constants.img_url+path; 11 JSONObject jo = new JSONObject(); 12 jo.put("url", url); 13 response.setContentType("application/json;charset=UTF-8"); 14 response.getWriter().write(jo.toString()); 15 } 16 }