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

一、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