ajax图片上传及FastDFS入门案例
来源:互联网 发布:历史上的穿越者 知乎 编辑:程序博客网 时间:2024/04/28 07:56
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 files10 base_path=/home/fastdfs11 12 # tracker_server can ocur more than once, and tracker_server format is13 # "host:port", host can be hostname or ip address14 tracker_server=192.168.200.128:2212215 #tracker_server=192.168.101.4:2212216 17 #standard log level as syslog, case insensitive, value list:18 ### emerg for emergency19 ### alert20 ### crit for critical21 ### error22 ### warn for warning23 ### notice24 ### info25 ### debug26 log_level=info27 28 # if use connection pool29 # default value is false30 # since V4.0531 use_connection_pool = false32 33 # connections whose the idle time exceeds this time will be closed34 # unit: second35 # default value is 360036 # since V4.0537 connection_pool_max_idle_time = 360038 39 # if load FastDFS parameters from tracker server40 # since V4.0541 # default value is false42 load_fdfs_parameters_from_tracker=false43 44 # if use storage ID instead of IP address45 # same as tracker.conf46 # valid only when load_fdfs_parameters_from_tracker is false47 # default value is false48 # since V4.0549 use_storage_id = false50 51 # specify storage ids filename, can use relative or absolute path52 # same as tracker.conf53 # valid only when load_fdfs_parameters_from_tracker is false54 # since V4.0555 storage_ids_filename = storage_ids.conf56 57 58 #HTTP settings59 http.tracker_server_port=8060 61 #use "#include" directive to include HTTP other settiongs62 ##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接口连接FastDFS15 String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize());16 17 //path:group1/M00/00/01/wKjIgFWOYc6APpjAAAD-qk29i78248.jpg18 //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 //返回json27 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 block29 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". 仅此而已.
- ajax图片上传及FastDFS入门案例.
- ajax图片上传及FastDFS入门案例
- ajax上传图片+FastDFS
- 图片上传服务器fastDFS
- ajax异步上传图片代码案例
- ajax上传图片及图片即点即改
- 如何使用FastDFS上传图片
- FastDFS+Ngnix+上传图片Demo
- FastDFS 图片上传功能实现
- 使用FormData进行Ajax请求异步上传图片案例
- 使用图片服务器FastDFS实现图片上传
- 【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示
- 【FastDFS】maven项目使用FastDFS上传和读取图片
- php图片上传之分布式存储FastDFS
- 【TaoTao】Nginx+FastDFS实现图片上传功能
- java上传图片到fastDFS服务器
- FastDFS学习笔记 -- day03 上传图片测试
- FastDFS学习笔记 -- day05 上传图片
- 【题解】atcoder2336 Flags
- memeory segmentation
- C++语言读取和保存单张图片的代码
- 基于SourceTree 下的 Git Flow 模型
- AFNetworking2.0和AFNetworking3.0 的HTTPS的配置
- ajax图片上传及FastDFS入门案例
- linux下socket编程和epoll的使用
- C string/char*/char[]互相转换
- 有知名品牌的就选知名品牌吧, 这样简单些
- Relay:一种内核到用户空间的高效数据传输技术
- 小Z的袜子--莫队
- js onclick事件传变量时注意的问题
- POJ 1488 - TEX Quotes
- oracle中的lock modes