html5圖片上傳及kingeditor富文本編輯器的使用

2019-11-06 07:18:49

字體：大中小

供稿：網(wǎng)友

一、html5圖片異步上傳

調(diào)用upload.CSS<link href="${pageContext.request.contextPath}/resource/css/upload/upload.css" rel="stylesheet" />

2.頁(yè)面html

<div id="images_" class="file_img"> <input type="file" class="form-control btn-3.導(dǎo)入js

<scr ipt 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.后臺(tái)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); //存儲(chǔ)路徑 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、添加新一個(gè)html

<br> <div class="row" id="div1"></div> <br> <div class="row" > <div class="span2"> <div id="addMore" class="add_more" style="line-height:40px;">新建多一個(gè)</div> <input type="hidden" id="numVal" value="2"> </div> </div> <br> //移除圖片$(".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"}); }});//添加多一個(gè) 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"}); } });});//添加多一個(gè) 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技術(shù)，電影院禁播的電影，歡迎關(guān)注QQ群494808400

上一篇：杭電 2028 Lowest Common Multiple Plus

下一篇：tensorflow提示出錯(cuò)'module' object has no attribute 'pack'