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

本文详细介绍了如何使用FastDFS进行图片上传,包括配置文件解析、Java接口应用、SpringMVC集成及前端事件处理。通过具体代码示例,展示了从图片选择、上传到服务器并回显的全过程。
5574

被折叠的 条评论
为什么被折叠?



