• 使用fckeditor上传多张图片


    流程:

    1.使用fck上传图片到后台

    2.后台上传图片到服务器端

    3.服务器端返回上传信息

    1.jsp页面

    <script type="text/javascript">
    $(function(){
        var tObj;
        $("#tabs a").each(function(){
            if($(this).attr("class").indexOf("here") == 0){tObj = $(this)}
            $(this).click(function(){
                var c = $(this).attr("class");
                if(c.indexOf("here") == 0){return;}
                var ref = $(this).attr("ref");
                var ref_t = tObj.attr("ref");
                tObj.attr("class","nor");
                $(this).attr("class","here");
                $(ref_t).hide();
                $(ref).show();
                tObj = $(this);
                if(ref == '#tab_2'){
                    var fck = new FCKeditor("productdesc");
                    fck.BasePath = "/res/fckeditor/";
                    fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";
                    fck.Height = 400 ;
                    fck.ReplaceTextarea();
                }
            });
        });
    });
    function uploadPic(){
        var options={
            url:"/upload/uploadPic.do",
            dataType:"json",
            type:"post",
            success:function(data){
                $("#product_url").attr("src",data.url);
                $("#imgUrl").val(data.path);
            }
        };
        $("#jvForm").ajaxSubmit(options);
    }
    </script>
    <tbody id="tab_2" style="display: none">
                    <tr>
                        <td >
                            <textarea rows="10" cols="10" id="productdesc" name="description"></textarea>
                        </td>
                    </tr>
    </tbody>

    2.controller层

     //异步上传没有返回值
         @RequestMapping(value="/upload/uploadFck.do")
         public void uploadFck(HttpServletRequest request, HttpServletResponse response){
             MultipartHttpServletRequest ms = (MultipartHttpServletRequest) request;
             Map<String, MultipartFile> filemap = ms.getFileMap();
             Set<Entry<String,MultipartFile>> entrySet = filemap.entrySet();
             for (Entry<String, MultipartFile> entry : entrySet) {
                 MultipartFile pic = entry.getValue();
                 Client client = new Client();        
                 ///图片生成策略
                 DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
                 String format = df.format(new Date());
                 Random r = new Random();
                 for(int i = 0;i<3; i++){
                     format += r.nextInt(10);
                 }
                 //得到文件扩张名
                 String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
                 String path = "upload/"+format+"."+ext;
                 String url = "http://localhost:8088/image-web/"+path; //服务器路径
                 WebResource resource = client.resource(url);
                 try {
                    resource.put(String.class,pic.getBytes());
                } catch (Exception e) {
                    e.printStackTrace();
                } 
                 UploadResponse ok = UploadResponse.getOK(url);//ok是个对象
                try {
                    response.getWriter().print(ok); //使用print可以返回对象
                    //write 字符流
                    //print 字节流
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
    
         }
  • 相关阅读:
    hibernate set的3个属性
    我的Android进阶之旅------&gt;Android无第三方Jar包的源代报错:The current class path entry belongs to container ...的解决方法
    SAN,NAS,DAS的差别
    SSDT表概念具体解释
    《COM本质论》COM是一个更好的C++心得分享
    Hadoop学习小结
    出来混,是否应该吹牛皮
    出来混,是否应该吹牛皮
    创业的关键:顺势而为
    创业的关键:顺势而为
  • 原文地址:https://www.cnblogs.com/menbo/p/9806008.html
Copyright © 2020-2023  润新知