js实现上传图片文字（全步骤）

最新推荐文章于 2024-04-20 03:39:57 发布

二月的微笑

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量3.1k

点赞数

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

二月的微笑

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现上传图片文字（全步骤）

用jq+jqForm实现以下是代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0&quo
复制链接

扫一扫