?用jq+jqForm实现
以下是代码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>图片上传</title>
<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js”></script>
<style lang=”scss”>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class=”layout”>
????<form id=”actPostInfos” enctype=”multipart/form-data” name=”actPostInfos”>
<div class=”lay-content”>
<div class=”lay_img_count”>
<div class=”l_img_logo”>
<!– 默认加载的图片 –>
????????????????<img id=”previewImg”
????????class=”banner-img” src=”https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=847657516,2498762978&fm=27&gp=0.jpg”
????????alt=”默认图片” width=”200″ height=”200″/>
</div>
<p style=”color:red”>建议尺寸：300*300 , 图片大小不能超过1M , 支持png , jpg等格式</p>
<input name=”file” id=”albumFile” type=”file” hidden=”hidden” accept=”image/*” />
</div>
<div class=”lay_img_counts clearfloat”>
<span class=”lay-visiblity”>点击按钮上传图片:</span>
<button id=”chooseBannerImgBtn” style=”width:60px;height:30px;background-color:orange;outline:none;border:none;
????????????color:#fff;”>上传logo</button>
</div>
<div class=”lay_club_profile” style=”min-height:200px;margin-top:10px;position:relative”>
<span style=”position:absolute;top:0;”>请输入上传内容: </span>
<textarea id=”infoList” style=”position:absolute;left:140px;max-height:200px;max-width:300px;outline:none;”
????????????name=”” rows=”10″ cols=”500″ placeholder=”请输入提交到服务器的内容” maxlength=”100″></textarea>
</div>
<div class=”lay_club_bottom” style=”width:50px;height:30px;background-color:pink;”>
<button id=”saveClubForm” style=”width:100%;height:100%;background-color:pink;”>保存</button>
</div>
</div>
????</form>
??</div>
</body>
</html>
*************************************************************************************************************************************************
同时上传图片与文字
首先上传文字内容比较简单，而上传图片的话比较麻烦，这里可以从网上下载commons-fileupload-1.3.1，commons-io-2.4两个jar包，
上传具体实现类代码如下：
public class TombServiceImpl implements TombService {
? ? ITombDao tombDao = new TombDao();//创建对象为后面调用dao层方法
? ? //图片等材料上传
? ? @Override
? ? public void upload(HttpServletRequest request, HttpServletResponse response) {
? ? ? ? try {
? ? ? ? ? ? request.setCharacterEncoding(“utf-8”);
? ? ? ? ? ? response.setCharacterEncoding(“utf-8”);
? ? ? ? } catch (Exception e) {
? ? ? ? ? ? e.printStackTrace();
? ? ? ? }
?? ?//声明其他属性变量
? ? ? ? String tombName = null;
? ? ? ? Double tombPrice = null;
? ? ? ? String tombSummary = null;
? ? ? ? //判断本次表单是否是一个multipart表单（带含文件上传）
? ? ? ? boolean isMultipart = ServletFileUpload.isMultipartContent(request);
? ? ? ? if (isMultipart) {
? ? ? ? ? ? //文件保存路径
? ? ? ? ? ? String savePath = request.getSession().getServletContext().getRealPath(“/”) + “upload/”;
? ? ? ? ? ? //相对路径
? ? ? ? ? ? String path = “/tomb/upload/”;
? ? ? ? ? ? //获取工厂对象
? ? ? ? ? ? DiskFileItemFactory factory = new DiskFileItemFactory();
? ? ? ? ? ? //设置缓冲区大小,单位字节
? ? ? ? ? ? factory.setSizeThreshold(1024 * 4);
? ? ? ? ? ? //产生servlet上传对象
? ? ? ? ? ? ServletFileUpload uploader = new ServletFileUpload(factory);
? ? ? ? ? ? uploader.setHeaderEncoding(“UTF-8”);
? ? ? ? ? ? //设置上传文件的最大大小，位置字节
? ? ? ? ? ? uploader.setSizeMax(4 * 1024 * 1024);
? ? ? ? ? ? //获取表单项
? ? ? ? ? ? try {
? ? ? ? ? ? ? ? List<FileItem> fileItems = uploader.parseRequest(request);
? ? ? ? ? ? ? ? String pictures_url = “”;
? ? ? ? ? ? ? ? for (FileItem item : fileItems) {
? ? ? ? ? ? ? ? ? ? //判断表单项是普通字段还是上传项
? ? ? ? ? ? ? ? ? ? if (item.isFormField()) {
? ? ? ? ? ? ? ? ? ? ? ? if (“tombName”.equals(item.getFieldName())) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? tombName = item.getString(“UTF-8”);
? ? ? ? ? ? ? ? ? ? ? ? } else if (“tombPrice”.equals(item.getFieldName())) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? tombPrice = Double.valueOf(item.getString(“UTF-8”));
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? tombSummary = item.getString(“UTF-8”);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? //上传项目
? ? ? ? ? ? ? ? ? ? ? ? String fileName = item.getName();
? ? ? ? ? ? ? ? ? ? ? ? File file = new File(savePath + tombName + “/”);//一个用户名下面存放多张图片
? ? ? ? ? ? ? ? ? ? ? ? if (!file.exists()) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? file.mkdirs();
? ? ? ? ? ? ? ? ? ? ? ? }
?? ??? ??? ?//这里保存图片是保存的相对路径，方便其他用户使用
String wirteFile_url = savePath + tombName + “/” + fileName; File wirteFile = new File(wirteFile_url); //写入文件对象 item.write(wirteFile); //如果有多个图片，拼接图片 String picture_url = path + tombName + “/” + fileName; pictures_url += picture_url; pictures_url += “;”; } }
?? ??? ?//上传参数
? ? ? ? ? ? ? ? Tomb tomb = new Tomb();
? ? ? ? ? ? ? ? tomb.setTombName(tombName);
? ? ? ? ? ? ? ? tomb.setTombPrice(tombPrice);
? ? ? ? ? ? ? ? tomb.setTombSummary(tombSummary);
? ? ? ? ? ? ? ? tomb.setTombPicture(pictures_url);
? ? ? ? ? ? ? ? tombDao.add(tomb);
? ? ? ? ? ? } catch (FileUploadException e) {
? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? } catch (Exception e) {
? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? }
? ? ? ? }
? ? }
servlet如下：
public class TombUpdateServlet extends HttpServlet {
? ? @Override
? ? protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
? ? ? ? doPost(request, response);
? ? }
? ? @Override
? ? protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
? ? ? ? TombService tombService=new TombServiceImpl();
? ? ? ? tombService.upload(request,response);//调用上面实现类的方法
? ? }
}
Dao层方法都很相似，就是相关的增删改查，这里只解释后台操作，是典型的MVC结构（servlet+jsp+JDBC+JavaBean+DAO+Mysql）
?
65640332
