簡單的圖片（頭像）上傳到服務器保存在自己的項目某文件下，並把相對路徑存到數據庫

首先參考：https://www.jb51.net/web/596053.html   裏面代碼可以自己複製粘貼感受一下。

我主要是copy了這位大神的js代碼，前端代碼也抄了一點點，因爲他寫的不完善沒有寫後端，和限制條件啥的~

前端：創建一個html文件，把下面代碼複製到body裏面（我的form表單是用來提交到後臺處理的，enctype="multipart/form-data" method="post" 是提交文件類型必須有的）

 <div class="txupload" id="txupload1" >
                 <form class="txform" action="fileupload" enctype="multipart/form-data" method="post">
                    <div class="container">
                        <input type="file" id="id-face" name="face"  accept="image/*"/>
                        <div id="face-empty-result">
                         <img src="pic/My.png" id="firstimg">
                        </div>
                        <img style="width: 100%;" class="showtx" id='face-result'/>
                    </div>
                       <button class="allowup" id="allowup1" style="width: 60px;height: 25px;font-size: 12px;margin-left: 65px;margin-top: 5px;" type="submit">確認修改</button>
                       
                  </form>

              </div>

css樣式： 

.txupload{
    width: 200px;
    height: 200px;
    background-color: #e7e7e7;
    z-index:5555;
    position: absolute;
    display: block;
   
}
.txform{
    width: 200px;
    height: 200px;
  position: absolute;
}
.container{
    background-color:#e7e7e7;
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: 70px;
}
.container div{
   
    margin-top: 30px;
}
.container input{
    opacity:0;
    filter:alpha(opacity=0);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.showtx{

    margin-top: 30px;
}

js部分：

window.onload=function(){
    document.getElementById("id-face").addEventListener("change", function(){       
        onFileChange(this,"face-result","face-empty-result")
      //拿到文件數據
   	 var img= document.getElementById('id-face').files[0];
   	 //console.log(img);
   	 //截取圖片名稱小數點後的字符串
   	 var ftype=img.name.substring(img.name.lastIndexOf(".")+1);
   	 //校驗格式是否是圖片類型
   	    if(ftype=="jpg" || ftype=="png" || ftype=="jpeg" || ftype == "JPG"){
   	        //限制大小，照片大小不能超過1M
   	        var size = img.size / 50 / 50;
   	        if (size > 1) {
   	            alert("頭像不能大於50px");
   	            onFileChange(this,"face-empty-result","face-result")
   	            return false;
   	        }
   	    }else{
               alert("頭像格式不對，請重新選擇！");
               onFileChange(this,"face-empty-result","face-result")
               return false;
           }
    });

/**
 * 選中圖片時的處理
 * @param {*} fileObj input file元素
 * @param {*} el //選中後用於顯示圖片的元素ID
 * @param {*} btnel //未選中圖片時顯示的按鈕區域ID
 */
function onFileChange(fileObj,el,btnel){
    var windowURL = window.URL || window.webkitURL;
    var dataURL;
    var imgObj = document.getElementById(el);
    document.getElementById(btnel).style.display="none";
    imgObj.style.display="block";
    if (fileObj && fileObj.files && fileObj.files[0]) {
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        imgObj.src=dataURL;
    } else {
        dataURL = fileObj.value;
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
    }
}

 後端：這個後端說起來很容易理解。

1、首先從前端獲取了自己的id，因爲是我存頭像，方便我下次登錄再查詢數據庫，把頭像顯示出來

2、中間有一大段代碼我在網上找的，直接用肯定可以，注意導jar包就行了！用Maven管理的話，在pom.xml裏面寫要導什麼包，它自己就下載了。據說很方便（不過我直接用的eclipse 創建的java web項目，得自己下載所需的包再關聯進去~）

相關的jar包0積分放心下載：https://download.csdn.net/download/qq_39455664/12400389

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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 org.apache.commons.io.FileUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.alibaba.fastjson.JSONException;
import com.alibaba.fastjson.JSONObject;


import JDBC.ImagesUpload;//這是我創建的數據庫增刪改查的

public class UploadServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String rename = "";//文件新生成的文件名
		String fileName = "";//文件原名稱
		String name = "";//普通field字段
		
		String id=(String) request.getSession().getAttribute("id");	
		 int myid=0;
		    if(null!=id && !id.equals("")){
		  
		      myid=Integer.parseInt(id);
		    } 
		//System.out.print(uname+"\n");
	
		
		DiskFileItemFactory sf= new DiskFileItemFactory();//實例化磁盤文件列表工廠
		@SuppressWarnings("deprecation")
		//String path = request.getRealPath("/upload");//得到上傳文件的存放目錄
		String localPath = request.getServletContext().getRealPath("/upload/");
		System.out.print(localPath+"\n");
		
		sf.setRepository(new File(localPath));//設置文件存放目錄
		sf.setSizeThreshold(1024*1024);//設置文件上傳小於1M放在內存中
	
		//從工廠得到servletupload文件上傳類
		ServletFileUpload sfu = new ServletFileUpload(sf);
		
		try {
			List<FileItem> lst = sfu.parseRequest(request);//得到request中所有的元素
			for (FileItem fileItem : lst) {
				if(fileItem.isFormField()){
					if("name".equals(fileItem.getFieldName())){
						name = fileItem.getString("UTF-8");
					}
				}else{
					//獲得文件名稱
					fileName = fileItem.getName();
					System.out.print(fileName+"\n");
					fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
					String houzhui = fileName.substring(fileName.lastIndexOf("."));//獲取文件後綴名
					rename = UUID.randomUUID()+houzhui;//避免重名重新取名
					fileItem.write(new File(localPath, rename));//將該圖片存入Path對應的路徑中
				}
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		String sqlPath = "upload/" + rename;
		ImagesUpload img=new ImagesUpload();//這是我創建的數據庫增刪改查的
		
		
		boolean valid=img.FindImg(myid);//判斷數據庫中是否已經有該用戶的記錄
		if(valid) {
			img.updateImages(myid, sqlPath);//如果有記錄則直接更新數據庫
		}else {
			img.addImages(myid, sqlPath);//沒有則把圖片存放的相對路徑插入數據庫中
		}
		 response.sendRedirect("sucess.jsp");
	}
}

這些我也是菜鳥一個，只是記載一下這個學習過程，歡迎交流哈！