Java web實現頭像上傳以及讀取顯示

2022-06-23 22:00:35

最近在做一個學生的資訊管理系統，其中就有一個功能是要上傳頭像以及實現顯示的功能，那麼要如何實現呢？

思路:

1.如果要上傳頭像並要顯示的話，可以建立一個工具類來將獲取的頭像另外複製一份放在工程目錄下，並修改其檔名(防止名字相同有衝突)。
2.要建立表，另一個img表用於存放該學生的頭像的儲存路徑、頭像名稱、以及該學生對應的ID。
3.在html頁面中可通過設定表單在獲取資訊，注意的是由於表單的enctype屬性要設為"multipart/form-data"，設定為該屬性可以上傳檔案。
4.建立servlet來對資料進行封裝，進行將資料新增資料庫中，並將資訊傳送給頁面

步驟:1.先將兩個表給建立出來。這裡我使用mysql進行建立,注意的是user的學號要和Img的學號用外來鍵關聯。

建立Img表

CREATE TABLE `img` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `image_path` varchar(255) DEFAULT NULL,
  `old_name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8

2.建立完資料庫後，先將前臺的html設計好，設定表單來獲取使用者填寫的資訊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
    <script src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
    <form action="addimgServlet"  method="post"  accept-charset="utf-8" enctype="multipart/form-data">
        <div >
            <img src="" width="150" height="150" id="previewimg">
        </div>
        <div >
            <input type="file" id="img" name="img" onChange="preview(this)"/>
            <span class="add">+</span>
        </div>
        <input  type="submit" id="submit_content" value="釋出">
    </form>
</body>
<script type="text/javascript">
    function preview(obj){
        var img = document.getElementById("previewimg");
        img.src = window.URL.createObjectURL(obj.files[0]);
    }
</script>
</html>

3.建立一個工具類Fileupload.java,用於獲取並處理表單中的資料。

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.*;

public class FileUpload {
    private static final long serialVersionUID = 1L;
    public Map<String,String> File_upload(HttpServletRequest request,String filepath) {
        //判斷上傳的表單是否為multipart/form-data型別
        if (ServletFileUpload.isMultipartContent(request)) {

            try {
                //1.建立DiskFileItemFactory物件,設定緩衝區大小和臨時目錄檔案
                DiskFileItemFactory factory = new DiskFileItemFactory();
                //2.建立ServletFileUpload物件，並設定上傳檔案的大小限制
                ServletFileUpload sfu = new ServletFileUpload(factory);
                sfu.setSizeMax(10 * 1024 * 1024);//以byte為單位 1024byte->1KB*1024=1M->1M*10=10M
                sfu.setHeaderEncoding("utf-8");

                //3.呼叫ServletFileUpload.parseRequest方法來解析物件，得到一個儲存了所有上傳內容的List物件
                List<FileItem> fileItemList = sfu.parseRequest(request);
                Iterator<FileItem> fileItems = fileItemList.iterator();

                //建立一個Map集合，用於新增表單元素
                Map<String, String> map = new TreeMap<String, String>();

                //4.遍歷fileItems，每迭代一個物件，呼叫其isFormField方法判斷是否是上傳檔案
                while ((fileItems.hasNext())) {
                    FileItem fileItem = fileItems.next();
                    try{
                        //普通的表單元素
                        if (fileItem.isFormField()) {
                            String name = fileItem.getFieldName();//name的屬性值
                            String value = fileItem.getString("utf-8");//name對應的value值
                            //新增進Map集合中
                            map.put(name, value);
                        } else {//否則即為<input type="file">上傳的檔案
                            if(fileItem.getName()==null||fileItem.getFieldName()==null){
                                map.put("fileName","empty");
                                map.put("newFileName","empty");
                            }else {
                                String fileName = fileItem.getName();// 檔名稱
                                System.out.println("原檔名：" + fileName);// Koala.jpg

                                String suffix = fileName.substring(fileName.lastIndexOf('.'));
                                System.out.println("擴充套件名：" + suffix);// .jpg

                                // 新檔名（唯一）
                                String newFileName = new Date().getTime() + suffix;
                                System.out.println("新檔名：" + newFileName);// image1478509873038.jpg

                                //將檔名存入到陣列中
                                map.put("fileName", fileName);
                                map.put("newFileName", newFileName);


                                // 5. 呼叫FileItem的write()方法，寫入檔案
                                String context = filepath+newFileName ;
                                System.out.println("圖片的路徑為"+context);
                                File file = new File(context);
                                System.out.println(file.getAbsolutePath());
                                fileItem.write(file);

                                //判斷該檔案是否為head_img下預設的頭像，如果不是才執行刪除
                                if(!fileName.contains("empty")|| !newFileName.contains("empty")){
                                    // 6. 呼叫FileItem的delete()方法，刪除臨時檔案
                                    fileItem.delete();
                                }

                            }

                        }
                    }catch (StringIndexOutOfBoundsException e ){
                        //若為空指指標
                        //未上傳圖片則按原來的圖片顯示
                        //設定為false,在進行資料庫操作時不對圖片進行操作
                        System.out.println("出現異常");
                        map.put("fileName","empty");
                        map.put("newFileName","empty");
                        e.printStackTrace();
                    }

                }
                return map;
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return  null;
    }

}

4.建立對應的servlet來處理使用者新增的資訊以及將資料分別存入到資料庫中

注意：在這裡新增資訊到資料庫中的操作和建立user物件是我在建立一個方法來實現，到時可根據自己的方法來實現方法

package domain;

public class Img {
   private String fileName;
   private String newFileName;

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public String getNewFileName() {
        return newFileName;
    }

    public void setNewFileName(String newFileName) {
        this.newFileName = newFileName;
    }

    @Override
    public String toString() {
        return "Img{" +
                "fileName='" + fileName + ''' +
                ", newFileName='" + newFileName + ''' +
                '}';
    }
}

package servlet;

import dao.UserDaoImpl;
import domain.Img;
import org.apache.commons.beanutils.BeanUtils;
import util.FileUpload;

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 java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/addimgServlet")
public class addimgServlet extends HttpServlet {
    //為類可持久化
    private static final long serialVersionUID = 1L;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //通過工具類獲取成員的資訊
        String file = getServletContext().getRealPath("/head_img/");
        Map<String,String> map = new FileUpload().File_upload(request,file);

        //建立img物件用來封裝資料
        Img img = new Img();
        try {
            BeanUtils.populate(img,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        System.out.println("servlet獲取的img資料為:"+img);
        //建立service物件將頭像資料存入到表中
        UserDaoImpl userDao  = new UserDaoImpl();
        userDao.addimg(img);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

==========================

package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.UserDaoImpl;
import domain.Head_img;

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 java.io.IOException;

@WebServlet("/getimgServlet")
public class getimgServlet extends HttpServlet {
    //為類可持久化
    private static final long serialVersionUID = 1L;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserDaoImpl userDao = new UserDaoImpl();
        Head_img img = userDao.getimg(Integer.parseInt(request.getParameter("id")));
        System.out.println("獲取的圖象的路徑為:"+img);
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),img);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

5.最後，在userlList.html中接收資訊並顯示出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顯示圖片</title>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script>
        function GetRequest() {
            var url = location.search; //獲取url中"?"符後的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for ( var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
        $(function () {
            $.get("getimgServlet",{id:GetRequest()["id"]},function (data) {
                $("#imgid").attr("src",data.image_path);
            })
        })

    </script>
</head>
<body>
    <h3>圖片</h3>
    <img width="150" height="150" id="imgid">
</body>
</html>

實現後效果如下

此時開啟資料庫便發現新增了該圖片對應的資料

如何根據對應的id來獲取圖片的路徑並顯示出來

基本效果就這樣子

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Java web實現頭像上傳以及讀取顯示

熱門文章