基于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插件。更多使用可以查看官网或者其他的网站。