ajax上传图片+FastDFS

1。事件

显示图片的标签：<img width="100" height="100" id="allUrl" src="${brand.imgUrl }"/>      （<input type="file" οnchange="uploadPic()" name="pics" multiple="multiple"/>上传多张）
隐藏域，用于回显和提交图片url地址：<input type="hidden" name="imgUrl" id="imgUrl" value="${brand.imgUrl }" />

提交按钮：<input type="file" name="pic" οnchange="uploadPic()"/>（包容这个标签的form  id=“jvForm”）

2.function

<script type="text/javascript">
    //上传图片
    function uploadPic(){
        //jquery.form.js   引用这个js包把input模仿为form表单上传
        var options={
                url:"/upload/uploadPic.do",      //处理的controller方法
                dataType:"json",
                type:"post",
                success:function(data){                  //data里面放置返回的路径
                    $("#allUrl").attr("src",data.url);            //attr(属性名,属性值)  设置属性的值 （为所有匹配的元素设置一个属性值。）
                    $("#imgUrl").val(data.url)
                }
        }
        $("#jvForm").ajaxSubmit(options);
    }
</script>

3.springMVC配置上传图片

<!-- 图片上传 -->
        <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>   //可以自行配置上传大小

4.接受图片

@Controller
public class UploadController {
    
    @Autowired
    private UploadService uploadService;
    //上传图片
    @RequestMapping(value="/upload/uploadPic.do")
    public void uploadPic(@RequestParam(required=false) MultipartFile pic      //这个pic要和input标签的name一样 @RequestParam获取提交的参数 false
            ,HttpServletResponse response) throws IOException{
        String path=uploadService.uploadPic(pic.getBytes(),pic.getOriginalFilename(), pic.getSize());
        
        String url=Constants.IMG_URL+path;
        
        JSONObject jo=new JSONObject();
        jo.put("url",url);
        
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().write(jo.toString());
    }

（****@RequestParam用来提取需要参数，form表单的提交是获取所有）

5.保存图片到FastDFS分布式文件系统

好处：不怕服务器宕机，每组服务器放一样的东西，分好多组，同组机器宕机会换另一组；可以横向扩展机器

在服务层服务器的spring中添加fdfs_client.conf配置文件修改：tracker_server=192.168.200.128:22122改为自己的地址

上传图片到fastDFS：（放在common共用）

public class FastDFSUtils {
    public static String uploadPic(byte[] pic,String name,long size){
        String path=null;
        //ClientGloble读取配置文件
        ClassPathResource resource=new ClassPathResource("fdfs_client.conf");
        try {
            ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath());
            //老大客户端
            TrackerClient trackerClient=new TrackerClient();
            TrackerServer trackerServer=trackerClient.getConnection();//连接老大客户端，返回地址
            StorageServer storageServer=null;
            StorageClient1 storageClient1=new StorageClient1(trackerServer, storageServer);//获取老大和小弟地址
            String ext=FilenameUtils.getExtension(name);//后缀名
            
            NameValuePair[] meta_list=new NameValuePair[3];//详细信息
            meta_list[0]=new NameValuePair("fileName",name);
            meta_list[1]=new NameValuePair("fileExt",ext);
            meta_list[2]=new NameValuePair("fileSize",String.valueOf(size));
            
            
            path=storageClient1.upload_file1(pic, ext, meta_list);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return path;
    }
}

service层调用：

@Service("uploadService")
public class UploadServiceImpl implements UploadService{

//上传图片

    public String uploadPic(byte[] pic,String name,long size){
        
        return FastDFSUtils.uploadPic(pic, name, size);
    }
}

controller层实现：

@Controller
public class UploadController {
    
    @Autowired
    private UploadService uploadService;
    //上传图片
    @RequestMapping(value="/upload/uploadPic.do")
    public void uploadPic(@RequestParam(required=false) MultipartFile pic
            ,HttpServletResponse response) throws IOException{
        String path=uploadService.uploadPic(pic.getBytes(),pic.getOriginalFilename(), pic.getSize());
        
        String url=Constants.IMG_URL+path;
        
        JSONObject jo=new JSONObject();
        jo.put("url",url);    //调用这个对象直接可以把要传递的数据直接转成json装入jo中
        
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().write(jo.toString());
    }

（***pic.getBytes()：pic的二进制数组；pic.getBytes()：pic的原始名；pic.getSize()：size）

常量地址接口：

public interface Constants {
    //图片服务器
    public static final String IMG_URL="http://192.168.200.128/";

}

（****多服务器的需要在服务方服务器和消费方服务器配置dubbo）

6.回显图片路径