直播網站原始碼，上傳圖片到專案目錄並將相對路徑儲存到資料庫

直播網站原始碼，上傳圖片到專案目錄並將相對路徑儲存到資料庫

HTML

<form action="${pageContext.request.contextPath}/pictureServlet" method="post" enctype="multipart/form-data">
      <input id="input" type="file" name="file">
      <button id="btn" type="submit ">提交</button>
</form>
    <img id="img" src="">

JS實現預覽

此時的預覽所獲得的路徑不能傳到後臺操作，是blob:http…格式，下面會說

$("#a").change(function (e) {
        console.log(e)
        reader.readAsDataURL(this.files[0]);
          reader.onload = function(e){
            console.log(e.target.result);
            document.getElementById("img").src = e.target.result;
          }
      })

Servlet

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.net.ssl.HttpsURLConnection;
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 javax.servlet.http.HttpSession;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/pictureServlet")
public class PictureServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/plain;charset=utf-8");
//此處將新建的檔案直接儲存到專案的絕對路徑中。File沒有讀寫能力。
        File savePath = new File("E:\\javaEE\\Project\\Picture\\web\\images");
        DiskFileItemFactory factory = new DiskFileItemFactory();//jar包的類
        ServletFileUpload upload = new ServletFileUpload(factory);//jar包的類
        try {
            List<FileItem> items = upload.parseRequest(request);
            //將前端的表單資料封裝成list。
            //form表單必須加enctype="multipart/form-data"，在使用包含檔案上傳控制元件的表單時，必須使用該值。
            for (FileItem item:items){
                if(item.isFormField()){
//說明普通表單項
                }else {
                //說明上傳檔案項
                //獲取上傳檔案的名稱
                    String name  = item.getName();
                    //獲取相對路徑
                    String path = request.getContextPath()+"/images/"+name;
                    //將相對路徑儲存到資料庫
                    Test test = new Test();
                    test.update(path);
//使用絕對路徑完成檔案上傳
                    item.write(new File(savePath,name));
                    //刪除臨時檔案
                    item.delete();
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
}
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

 以上就是直播網站原始碼，上傳圖片到專案目錄並將相對路徑儲存到資料庫， 更多內容歡迎關注之後的文章