基于Springmvc使用jq异常图片上传至fastDFS 加回显
我们在开发的时候经常遇到一个场景，在修改一个对象信息的时候，会让图片上传上去，并加显。比如个人信息的头像上传，品牌信息的图片上传
分析：
1. 这种场景下我们经常会使用ajax异步传输的方式来实现这个功能。
2. 我们这里使用的是基于springmvc开发的。所有需要给springmvc进行配置.(添加一个接收文件的配置文件，搭建环境这里不提)。
3.当图片较多的时候，需要用到fastDFS专门设置一个图片服务器
第一步：导入jquery.form.js
<script src="/js/jquery.form.js" type="text/javascript"></script>
第二步：编辑前端页面
<!--表单--> <form id="jvForm" > <input type="file" name="pic" onchange="uploadPic()"/> </form>
<!--js-->
<script type="text/javascript">
function uploadPic(){
var option={
url:"/upload/uploadPic.do", <!--提交到后台的地址，让controller接收-->
type:"POST",
dataType:"json", <!--注意这里dataType:"json" 中的json不能是大写的 要不不识别，返回的json字符串，小写的返回json对象-->
success:function(data){
alert(data); //返回的是 Object object为json对象 否则为json字符串
// 图片回显
$("#allUrl").attr("src",data.allUrl);
}
}
$("#jvForm").ajaxSubmit(option);
}
</script>
第三步：在后台spring配置文件上传解析器
<!-- 配置上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver> <property name="maxUploadSize" value="5242880"></property> </bean>
第四步：后台处理
@RequestMapping("/upload")
public class UploadController {
@Resource
private UploadService uploadService;
@SuppressWarnings("deprecation")
@RequestMapping("/uploadPic.do")
public void uploadPic(MultipartFile pic,HttpServletRequest
request,HttpServletResponse response) throws Exception{
<!--形参上的pic必须和前台页面的传递的<input>标签的name中的值一样-->
<!--这里是调用方法保存图片-->
String path=uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename());
//图片回显
String allUrl=XinbabaConstants.IMG_URL+path;
JSONObject jsonObject=new JSONObject();
jsonObject.put("allUrl", allUrl); //图片完整url
jsonObject.put("imgUrl", path); //图片部分URL
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(jsonObject.toString());
}
}
说明：将json对象返回，在前台通过j操作将值图片地址添加到<img>标签中 至此图片就算回显完成，下面的操作就是将图片添加到服务器中，也就是说的保存图片
第五步：保存图片到fastDFS服务器上
service层
/** * 附件上传至FastDFS */ @Override public String uploadPic(byte[] file_buff, String filename) throws Exception { <!--调用fastDFS工具完成图片上传 file_fuff是文件的字节数组，finame 文件的直实名称--> String path = FastDFSUtil.uploadPicToFDFS(file_buff, filename); return path; //返回图片的路径 }
- 编写fastUtls工具类
-
public class FastDFSUtil { public static String uploadPicToFDFS(byte[] file_buff,String filename) throws Exception{ //1.创建classPathResouce对象，用于加载配置文件 ClassPathResource resource = new ClassPathResource("fdfs_client.conf"); //2.初始化配置文件 ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath()); //3.获取跟踪服务器的客户端 TrackerClient trackerClient = new TrackerClient(); //4.通过跟踪服务器的客户端获取服务端 TrackerServer trackerServer = trackerClient.getConnection(); //5通过跟踪服务器的服务端获取存储服务器的客户端 StorageClient1 storageClient1 = new StorageClient1(trackerServer,null); //6.将附件上传至FastDFS String file_ext_name=FilenameUtils.getExtension(filename); String path=storageClient1.upload_file1(file_buff, file_ext_name, null); return path; } }
到此就完了，这只是一个初步fastDFS的用法，他到底有什么深入的功能还不是很懂，还有待研究，希望能同学能给够能予帮助提出
- 前端使用jquery.form 是jquery提供的是一个很好用的js插件。更多使用可以查看官网或者其他的网站。
