如何在wangeditor批量上传图片（详细代码分享）

wangeditor上传单个图片很简单，那么如果是要批量上传图片该怎么弄呢？其实也是非常简单的，只需要把昨单个图片的代码稍微改一下就好。我们一起来学习下wangeditor批量上传图片。

<%@ page language=”java” contentType=”text/html; charset=UTF-8″

pageEncoding=”UTF-8″%>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</div>

var E = window.wangEditor

var editor = new E(‘#div1’);

var $text1 = $(‘#text1’)

editor.customConfig.uploadImgServer = ‘/wangedit/upload’; //这里是个servlet

editor.customConfig.uploadImgHooks = {

fail:function (xhr, editor, result) {

//上传错误时触发

alert(“上传图片失败”);

}

};

editor.customConfig.customUploadImg = function(files, insert) {

var formData = new FormData();

for(var i = 0;i < files.length;i ++) {

formData.append(“files[” + i + “]”, files[i], files[i].name);

}

$.ajax({

url:’/wangedit/upload’, //这里是个servlet

type: “POST”,

data: formData,

async: false,

cache: false,

contentType: false,

processData: false,

success:function(da){

console.log(da);

if(da.errno == 0){

for(var j=0;j<da.data.length;j++){

insert(da.data[j]);

}

}else{

alert(da.msg);

return;

}

});

};

// 将图片大小限制为 3M

editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

// 限制一次最多上传 5 张图片

editor.customConfig.uploadImgMaxLength = 30;

// 或者 var editor = new E( document.getElementById(‘editor’) )

editor.customConfig.onchange = function (html) {

// 监控变化，同步更新到 textarea

$text1.val(html)

}

editor.create()

// 初始化 textarea 的值

$text1.val(editor.txt.html())

$(“#tijiao”).click(function(){

var content= $(‘#text1’).val();

console.log(content);

alert(content);

})

</script>

</body>

</html>

后台代码

package wangedit.servlet;

import java.io.File;

import java.io.IOException;

import java.io.PrintWriter;

import java.net.InetAddress;

import java.util.List;

import java.util.UUID;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.alibaba.fastjson.JSONArray;

import com.alibaba.fastjson.JSONObject;

@WebServlet(“/upload”)

public class wangedit extends HttpServlet{

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// TODO Auto-generated method stub

req.setCharacterEncoding(“UTF-8”);

resp.setContentType(“text/json;charset=UTF-8”);

JSONObject json = new JSONObject();

PrintWriter out = resp.getWriter();

String path = this.getClass().getClassLoader().getResource(“/”).getPath();

int index = path.indexOf(“wangeditor”);

path = path.substring(0, index + “wangeditor”.length()) + “/resources/upload/”;

path = “E:/apache-tomcat-9.0.6/webapps/img”;

DiskFileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload sfu = new ServletFileUpload(factory);

sfu.setHeaderEncoding(“UTF-8”); // 处理中文问题

sfu.setSizeMax(10* 1024 * 1024); // 限制文件大小

String fileName = “”;

try {

List<FileItem> fileItems = sfu.parseRequest(req);

JSONArray arr = new JSONArray(); //注意摆放的位置

for (FileItem item : fileItems) {

fileName = UUID.randomUUID().toString() + item.getName();

item.write(new File(path + “/” + fileName));

InetAddress address = InetAddress.getLocalHost();// 获取的是本地的IP地址

String hostAddress = address.getHostAddress();

String imgUrl =”../img/”+fileName;

arr.add(imgUrl);

}

json.put(“errno”, 0);

json.put(“data”, arr);

System.out.println(arr.size());

out.print(json.toString());

out.flush();

out.close();

} catch (Exception e) {

e.printStackTrace();

json.put(“errno”,”200″);

json.put(“msg”,”服务器异常”);

out.print(json.toString());

}

如何在wangeditor批量上传图片（详细代码分享）

相关推荐

TOP虚拟主机推荐

最新文章

随机文章

热门标签

网站声明内容