通过ajaxFileUpload异步请求上传文件（ajaxFileUpload+servlet实现文件上传下载）

落日映苍穹つ 2023-10-03 15:41 20阅读 0赞

### 1、最终效果 ###

实现选择图片（此处以图片为例，支持所有类型文件的上传），选择之后将选择的图片在页面中显示出来，点击上传，可以将文件上传到指定的地址中，上传成功后在当前页面自动显示下载标签。

源码下载地址：链接：https://pan.baidu.com/s/17G63S9rkfFIfGBqwCwUHaA  
提取码：52b7

![watermark,type\_ZHJvaWRzYW5zZmFsbGJhY2s,shadow\_50,text\_Q1NETiBA6Zu-5p6X5bCP5aaW,size\_20,color\_FFFFFF,t\_70,g\_se,x\_16][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16]

### 2、技术结构 ###

eclipse+servlet+ajaxFileUpload+windows

### 3、将文件上传下载依赖的包及js文件拷贝到创建好的项目中 ###

说明：具体需要的文件要是没有可以从我提供的源码中下载

![watermark,type\_ZHJvaWRzYW5zZmFsbGJhY2s,shadow\_50,text\_Q1NETiBA6Zu-5p6X5bCP5aaW,size\_9,color\_FFFFFF,t\_70,g\_se,x\_16][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_9_color_FFFFFF_t_70_g_se_x_16]

### 4、在项目的WebContent下创建index.jsp页面，并加入页面内容 ###

说明：使用HTML页面也可以。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        <title>测试文件上传下载</title>
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>
    	<script type="text/javascript">
    	//该函数实现将选中的图片直接显示到当前的页面中
    	function setImagePreview(){ 
    	    //得到上传的文件
    		var docObj=document.getElementById("file");
    	    //得到img图片
    		var imgObjPreview=document.getElementById("img1"); 
    		if(docObj.files && docObj.files[0]){ 
    		    //火狐下，直接设img属性 
    		    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    		}else{
    			//IE下，使用滤镜 
    			//alert(docObj.select());
    			docObj.select(); 
    			var imgSrc = document.selection.createRange().text;
    			var localImagId = document.getElementById("imagediv"); 
    			var ImagId = document.getElementById("img1"); 
    			//必须设置初始大小 
    			localImagId.style.width = "150px"; 
    			localImagId.style.height = "200px"; 
    			ImagId.style.width = "150px"; 
    			ImagId.style.height = "200px"; 
    			//图片异常的捕捉，防止用户修改后缀来伪造图片 
    			try{ 
    			  localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
    			  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
    			}catch(e){ 
    			  alert("您上传的图片格式不正确，请重新选择!"); 
    			  return false; 
    			} 
    			imgObjPreview.style.display = 'none'; 
    			document.selection.empty(); 
    			} 
    		return true; 
    		}
    		
    		
    	</script>
    
    <style type="text/css">
      #imagediv{
        width:150px;
        height:200px;
        background-color:red;
        margin:0 auto;
        border:#000000 solid 2px;
        text-align: center;
      }
      
    #file{
      position:absolute;
      z-index:100;
      opacity:0;
      filter:alpha(opacity=0);
      height:200px;
      readonly:true;
    }
    #uploadbutton{
      margin-top:10px;
    }
    </style>
      </head>
      
      <body>
         <div id="imagediv">
           <input type="file" id="file" name="file" style="width:200px;" onchange="setImagePreview()"/>  
           <img id="img1" src="image/add.jpg"  style="width:150px;height:200px;"   />
           <button id="uploadbutton" onclick="addInfo()">点击上传文件</button>
            <a id="downImg" style="display:none" href="">下载</a>
         </div>
      
      </body>
    </html>

【效果如下】

### 5、创建上传按钮的addInfo()函数，并实现异步请求上传代码编写 ###

说明：

1、ajaxFileUpload向后端传递数据使用的是json类型参数。

2、success:函数为上传成功后的回调函数 $("\#downImg").show();//待上传成功后 显示下载按钮  
$("\#downImg").attr("href","filedowload.do?filePath="+data.filePath)；//设置下载标签的href具体下载地址

3、fileElementId参数:需要上传的文件域的ID，即<input type="file" id="file1">的ID。

4、data:向后端传递数据，与$.ajax使用方式相同。第一：通过js或者jquery技术获取输入框的值，放入到指定属性后，如：\{"user\_id":$("\#user\_id").val()\}。第二：通过序列化技术直接提交表单，如：data:$("\#form1").serialize()

5、secureuri：是否启用安全提交，默认为flase.

### 6、创建异步请求调用的servlet(请求地址名称：fileupload.do) ###

![watermark,type\_ZHJvaWRzYW5zZmFsbGJhY2s,shadow\_50,text\_Q1NETiBA6Zu-5p6X5bCP5aaW,size\_12,color\_FFFFFF,t\_70,g\_se,x\_16][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_12_color_FFFFFF_t_70_g_se_x_16]

说明：

1、ServletFileUpload.isMultipartContent(request); 检查请求中是否有文件，返回一个boolean类型的值，true表示有文件file,false表示普通表单。

2、list.get(i).getString("utf-8")；以utf-8编码集获取请求中的字符，如果不设置，会出现中文乱码。

3、下面代码使用到的地址：如D://aa,D://aa//temp,都是自定义路径，你可以使用自己的地址

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //修改请求和响应乱码
    		request.setCharacterEncoding("utf-8");
    		response.setContentType("text/html;charset=utf-8");
    		// 检查是否有一个文件上传请求，true表示有文件file,false表示普通表单
            boolean isMultipart = ServletFileUpload.isMultipartContent(request);  
            System.out.println("isMultipart:"+isMultipart);
            if (!isMultipart){
                return;  
            }  
            //创建FileItem 对象的工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();  
            //设置数据在内存缓存大小(byte)
            factory.setSizeThreshold(1024);
            //设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
            File tempDir = new File("D://aa//temp"); //临时存放目录 
            factory.setRepository(tempDir);
            ServletFileUpload upload = new ServletFileUpload(factory);  
            List<FileItem> list = null;  
            try {  
            	list = upload.parseRequest(request);  
            } catch (FileUploadException e1) {  
                // TODO Auto-generated catch block  
                e1.printStackTrace();  
            }  
            //遍历解析list,list中包含表单字段内容和上传的文件内容。
            for(int i=0;i<list.size();i++){  
                //判断获取，表单中的文本数据
                if (list.get(i).isFormField()){
                	//输出表单中的参数的name和value
                    if(list.get(i).getFieldName().equals("user_id")){
                    	//以utf-8编码集解析出请求中的数据
                    	System.out.println(list.get(i).getString("utf-8"));
                    }if(list.get(i).getFieldName().equals("user_name")){
                    	System.out.println(list.get(i).getString("utf-8"));
                    } 
                } else {
                    String fileName = list.get(i).getName();
                    System.out.println("======fileName1======"+fileName);
                    String saveDir = "D:/aa"; //文件存放路径，
                    File uploadedFile= new File(saveDir);
                    if(!uploadedFile.exists()){//假如目录不存在，就创建目录
                    	uploadedFile.mkdir();//创建aa目录
                    }
                    //输入流关联源文件--此事源文件被解析到了list集合中，所以通过list创建输入流
                    InputStream is=list.get(i).getInputStream();
                    //输出流关联目标文件
                    OutputStream os=new FileOutputStream(uploadedFile+"//"+fileName);
                    //传输文件--次数设置文件一次传输1M
    				byte b[]=new byte[1024];
    				while((is.read(b))!=-1){
    					os.write(b);
    				}
                    os.flush();//关闭输出流前，刷新
                    os.close();//关闭输出流
                    is.close();//关闭输入流
                    //返回文件的具体路径，供页面下载使用，并返回json字符串
                    String filedir="D://aa//"+fileName;
                    System.out.println("fileDir"+filedir);
                    response.getWriter().print("{'filePath':'"+filedir+"'}");
                }  
            }  
    	}

### 7、如上代码实现效果如下 ###

### 8、实现下载功能,创建Servlet(请求名称为：filedowload.do) ###

说明：

1、上传文件后，下载按钮旁边会出现一个下载按钮

2、filePath路径直接传递的是完整的路径：如D://aa//1.jpg

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//获取请求中的文件地址,例如：D://aaa//1.jpg
    		String filePath=request.getParameter("filePath");
    		//从地址中解析出文件的名称,例如1.jpg
    		String  fileName=filePath.substring(filePath.lastIndexOf("//")+2);
    		//修改附件格式,修改响应头，MIME协议格式判断
    		//此时界面还没有弹出---判断文件属于那种类型。
    		response.setContentType(getServletContext().getMimeType(fileName));
    		//创建附件格式下载文件---实现弹出框效果。
    		response.setHeader("Content-Disposition","attachment;filename="+fileName);
    		//源文件在list中，通过getInputStream进行关联
    		File file=new File(filePath);
    		InputStream is=new FileInputStream(file);
    		//创建输入流，关联目标文件
    		OutputStream os=response.getOutputStream();
    		//传输文件
    		byte b[]=new byte[1024];
    		while((is.read(b))!=-1){
    			os.write(b);
    		}
    		//关闭资源
    		os.flush();//刷新
    		os.close();
    		is.close();
    	}

### 9、下载功能具体实现效果如下 ###

不足之处可以在评论区之处，博主会及时回复和完善文章。

创作不易，关注点赞就是最大的动力。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210901113949544.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210901114329671.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_9,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/20210901114748845.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210901121618842.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/2021090112034653.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/20210901120413204.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/202109011208518.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Zu-5p6X5bCP5aaW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/2021090112095711.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Zu-5p6X5bCP5aaW,size_20,color_FFFFFF,t_70,g_se,x_16