html5图片上传及kingeditor富文本编辑器的使用

一、html5图片异步上传

1. 调用upload.css

<link href="${pageContext.request.contextPath}/resource/css/upload/upload.css" rel="stylesheet" />

2.页面html

<div id="images_" class="file_img">
                        <input type="file" class="form-control btn-primary" name="uploadImage" id="uploadImage" 
                            onchange="saveFile_cover('uploadImage','file_img')"/>
                        <i class="re"></i>
                    </div>

3.导入js

 <script src="${pageContext.request.contextPath}/resource/js/jquery/jquery.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/resource/js/layer/layer.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/resource/js/upload/ajaxfileupload.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/resource/js/upload/uploadFile.js" type="text/javascript"></script>

function saveFile_cover(imgid,target_img) {
    $.ajaxFileUpload({
        url : '../upload/saveUploadFile.html',
        secureuri : false,
        fileElementId : [ imgid ],
        dataType : 'text',
        success : function(data) {
            var url = data.substring(data.indexOf("[")+1,data.indexOf("]"));
            $("."+target_img).css({"background":"url('../../"+url+"') no-repeat center","background-size":"500px"});
            $("#cover").val(url);
        },
        error : function(data) {
            alert("error");
        }
    });
}

4.后台java

@RequestMapping("/saveUploadFile")
    @ResponseBody
    public void saveUploadFile(HttpServletResponse response , HttpServletRequest request) throws Exception{
        String imagePath = null;
        List<String> fileList = new ArrayList<String>();
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        if (multipartResolver.isMultipart(request)) {
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                MultipartFile file = multiRequest.getFile(iter.next());
                if (!file.isEmpty()) {
                    String originalFileName = file.getOriginalFilename(); //原文件名
                    //前缀
                    String prefixString = UUID.randomUUID().toString().replace("-","")+UUID.randomUUID().toString().replace("-","").substring(2,7);
                    //后缀
                    String suffixString = originalFileName
                            .substring(originalFileName.lastIndexOf(".") + 1);
                    //判断后缀类型 返回 下载路径
                    String suffixType = FileUtil.getTypeBySuffixName(suffixString);
                    String[] suffixType_ = suffixType.split(",");
                    String filetype = suffixType_[0];
                    String suffixTypeStr = suffixType_[1];
                    String fileName = prefixString + StringUtil.getCharAndNumr(6,"03") + "." + suffixString;
                    String uploadUrl = request.getSession().getServletContext().getRealPath("/") + "/" + suffixTypeStr;
                    File dir = new File(uploadUrl);
                    if (!dir.exists()) {
                        dir.mkdirs();
                    }
                        File targetFile = new File(uploadUrl + fileName);
                        imagePath = suffixTypeStr + fileName;
                        fileList.add(imagePath);
                        if (!targetFile.exists()) {
                            try {
                                targetFile.createNewFile();
                            } catch (IOException e) {
                                e.printStackTrace();
                            }
                            try {
                                file.transferTo(targetFile);

                                /*YhFile yhFile = new YhFile();
                                yhFile.setCreatetime(new Date());
                                yhFile.setDelflg(Global.DELFLG_00);
                                yhFile.setFilename(originalFileName); //原文件名称
                                yhFile.setFileplace(imagePath); //存储路径
                                Long l = FileUtil.getFileSizes(targetFile);
                                yhFile.setFilesize(FileUtil.FormetFileSize(l)); //文件大小

                                yhFile.setFiletype(filetype);
                                yhFile.setParentid(parentid);
                                yhFile.setStatus(Global.STATUS_USABLE);
                                yhFile.setSuffixname(suffixString);
                                fileService.addFile(yhFile);

                                int fileId = yhFile.getId();
                                int userId = 1;
                                UserFile userFile = new UserFile();
                                userFile.setFileid(fileId);
                                userFile.setUserid(userId);
                                userFileService.addUserFile(userFile);*/
                            } catch (IllegalStateException e) {
                                e.printStackTrace();
                            } catch (IOException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                    request.setCharacterEncoding("UTF-8");
                    response.setContentType("text/html; charset=UTF-8");
                    response.getWriter().print(fileList);
            }
        }
    }

5、添加新一个html

<!-- 添加新一个 start -->
                <br>
                    <div class="row" id="div1"></div>
                    <br>
                    <div class="row" >
                        <div class="span2">
                            <div id="addMore" class="add_more" style="line-height:40px;">新建多一个</div>
                            <input type="hidden" id="numVal" value="2">
                        </div>
                    </div>
                    <br>
                <!-- 添加新一个 end -->
//移除图片
$(".re").click(function() { 
    if($($(this).parent()[0]).css("background-image")!=""){
        var image = $(this).parent()[0].style.background;
        $.ajax({
            "type" : "POST",
            "url" : "../upload/delImgFile.html", 
            "data" : {"image":image},
            "success" : function(data,status) {
                if(data.status == "1"){
                    layer.alert("删除成功",{"time":1000});
                }
            },
            "error" : function(data) {
                layer.alert("操作失败",{"time":1000});
            }
        });
        $($(this).parent()[0]).css({"background":"url(../../resource/img/uploadImg.png) no-repeat 100% 100%","background-position":"center"});
    }
});


//添加多一个 start                  
$("#addMore").click(function(){
    var num = $("#numVal").val();
    var saveFile2 = "saveFile2('uploadImage"+num+"','file_img"+num+"')";
    var firstImage = $('<div class="row">'
            +'<div class="span1 c_white"><label class="f_r l_label">图片'+num+'：</label></div>'
            +'<div class="span11">'
            +'<div id="images_'+num+'" class="file_img'+num+'" style="width:500px;height:200px;border:1px solid #E3E3E3;background: url(../../resource/img/uploadImg.png) no-repeat 100% 100%;background-position: center;cursor: pointer;position: relative;border-radius:3px;cursor: pointer;">'
            +'<input type="file" class="form-control btn-primary" name="uploadImage'+num+'" id="uploadImage'+num+'"' 
            +'onchange="'+saveFile2+'" style="opacity: 0;width: 500px;height:200px;cursor: pointer;"/>'
            +'<i class="re"></i>'
            +'</div>' 
            +'</div></div>');
    var button = $('<div class="row">'
                  +'<div class="span1">'
                  +'<div class="add_more red">移除</div>'
                  +'</div>'
                  +'</div>');
    $("#div1").append(firstImage).append(button);
    num = parseInt(num) + 1;
    $("#numVal").val(num);

    button.click(function() { 
        firstImage.remove();
        button.remove(); 
        var num2 = $("#numVal").val();
        num2 = parseInt(num2) - 1;
        $("#numVal").val(num2);
    });

    $(".re").click(function() { 
        if($($(this).parent()[0]).css("background-image")!=""){
            var image = $(this).parent()[0].style.background;
            $.ajax({
                "type" : "POST",
                "url" : "../upload/delImgFile.html", 
                "data" : {"image":image},
                "success" : function(data,status) {
                    if(data.status == "1"){
                        layer.alert("删除成功",{"time":1000});
                    }
                },
                "error" : function(data) {
                    layer.alert("操作失败",{"time":1000});
                }
            });
            $($(this).parent()[0]).css({"background":"url(../../resource/img/uploadImg.png) no-repeat 100% 100%","background-position":"center"});
        }
    });

});
//添加多一个 end

二、kingeditor富文本编辑器的使用

<jsp:include page="../common/kindeditor.jsp"></jsp:include> 

<textarea class="form-control" id="editor_id" name="descr"></textarea> 

.ke-toolbar{
position:fixed; 
z-index:1; 
width: 88px;
top: 250px;
left: 1060px;
}
.ke-content{
position:absolute; 
width:100%; 
z-index:2; 
}

全CSDN的丰（好）色（se）博客，这里有书本看不到的Java技术，电影院禁播的电影，欢迎关注QQ群494808400