原生ajax 上传多个图片 servlet接收保存图片

81 阅读 0 评论 54 点赞

我是靠谱客的博主搞怪香水，最近开发中收集的这篇文章主要介绍原生ajax 上传多个图片 servlet接收保存图片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果图：

html代码：

<style type="text/css">
	.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
	}
	.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
	}
	.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
	}
</style>
<body>
	<a class="file" href="javascript:;">上传图片
		<input type="file" id="file" multiple="multiple" onchange="javascript:uploadImage(this);" accept="image/jpeg,image/png,image/gif">
	</a>
	<div id="showImage"></div>
</body>

js及ajax代码：

<script type="text/javascript">
    /**
     * 上传图片
     */
	function uploadImage(image) {
		if(image!=null){
			var file = image.value;
			var index = file.lastIndexOf('.'); //获取最后一位小数点
	        var extension =  file.substr(index +  1);
	        var arr = ['jpeg','png','jpg','gif'];
	        if (isInArray(arr,extension)) {
	        	var formData = new FormData();
	        	for(var i=0;i<image.files.length;i++){
		           	formData.append("image"+i,image.files[i]); 	        		
		        }
	            ajax("saveImage",formData,showMessage);
	        } else{
	            alert('请选择正确的图片格式');
	            return false;
	        }
        	document.getElementById("file").value = "";//选择文件初始化
        }
	}
	/**
     * 使用循环的方式判断一个元素是否存在于一个数组中
     * @param {Object} arr 数组
     * @param {Object} value 元素值
     */
    function isInArray(arr,value){
        for(var i = 0; i < arr.length; i++){
            if(value === arr[i]){
                return true;
            }
        }
        return false;
    }
    /* ajax访问服务器 */
	function ajax(servlet,message,callback) {
		var xmlhttp;
		if (window.XMLHttpRequest){
			// code for IE7+, Firefox, Chrome, Opera, Safari
		  	xmlhttp=new XMLHttpRequest();
		} else{
			// code for IE6, IE5
		  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
				
		xmlhttp.open("POST",servlet,true);
		//上传图片文件时，就不能添加head信息
		//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //POST 必须写在open和send中间
		xmlhttp.send(message);//发送信息
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4) { //请求完成
				if (xmlhttp.status == 200) { //ok
					backjson = JSON.parse(xmlhttp.responseText); //解析成json对象
					return callback(backjson);
				} else {
					alert(xmlhttp.status);
					console.log(xmlhttp.status);
				}
			}
		};
	}
     /**
      *ajax上传图片后，调用该方法，成功显示图片，失败显示提示信息
      *
      */
   	function showMessage(json){
   		if(json.success){
	   		for(var i=0;i<json.imageurl.length;i++){
	   			var node=document.createElement("img");
	   			node.setAttribute("src",json.imageurl[i]);
	   	   		document.getElementById("showImage").appendChild(node);   			
	   		}   			
   		}else{
   			var node=document.createElement("p");
   			node.innerHTML = "上传失败";
   			document.getElementById("showImage").appendChild(node);   	
   		}
   	}
</script>

servlet代码：

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;
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 net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import technical_management.utils.MyUtil;

@WebServlet("/saveImage")
public class SaveImage extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//保存上传的文件
		Map<String, File> fileMap = MyUtil.saveFile(request);
		
		//将文件url存入数据库中
		ImageService service = new ImageService(); 
		boolean success = service.add(fileMap);
				
		//返回json信息
		JSONObject json = new JSONObject();
		json.put("success", success);
		JSONArray array = new JSONArray();
		for (String imageurl : fileMap.keySet()) {
			array.add(imageurl);		
		}
		json.put("imageurl", array);
		PrintWriter out = response.getWriter();
		out.print(json);
	}

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

图片写入的工具方法：

/**
	 * 保存文件到本地服务器上
	 * @param request
	 * @return 保存的文件 和 客户端访问文件的位置url
	 */
	public static Map<String, File> saveFile(HttpServletRequest request) {
		Map<String, File> fileMap = new HashMap<>();
	
		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		upload.setHeaderEncoding("utf-8");
		List<FileItem> lists;
		String relativePath = "uploadImage";//保存文件位置
		String savepath = request.getServletContext().getRealPath(relativePath);
		File savedir = new File(savepath);
		if(!savedir.exists()) {
			savedir.mkdir();//创建保存目录
		}		
		File real = null;
		try {
			lists = upload.parseRequest(request);
			Iterator<FileItem> iterator = lists.iterator();
			while(iterator.hasNext()) {
				FileItem fileItem = iterator.next();
				if (fileItem.isFormField()) {
					System.out.println(fileItem.getName());					
				} else {
					String fileExt = fileItem.getName().substring(fileItem.getName().lastIndexOf("."));//带"."的文件后缀名
					real = new File(savedir+"/"+ dateFormat2(new Date())+(int)(1+Math.random()*100) + fileExt);
					if (!real.exists()) {
						real.createNewFile();//创建保存文件
					}
					//从fileItem中读取文件流，写入指定文件中
					InputStream in = fileItem.getInputStream();
					FileOutputStream out = new FileOutputStream(real);
					byte[] bs = new byte[1024];
					while(in.read(bs) > 0 ) {
						out.write(bs);
					}
					out.flush();
					in.close();
					out.close();
				}
				fileMap.put(relativePath+"\"+real.getName(),real);
			}
		} catch (FileUploadException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return fileMap;
	}