简单的图片（头像）上传到服务器保存在自己的项目某文件下，并把相对路径存到数据库

首先参考：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");
	}
}

这些我也是菜鸟一个，只是记载一下这个学习过程，欢迎交流哈！