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

来源：互联网发布：玻璃水主要成分知乎编辑：程序博客网时间：2024/05/01 05:56

一、html5图片异步上传

调用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

0 0