上传图片至fastdfs分布式文件系统并回显

事件,当我们浏览完图片选中一张时,触发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 }

 

转载于:https://www.cnblogs.com/cuibin/p/6913821.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值