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

墨蓝 2022-05-08 13:38 663阅读 0赞

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