ajax异步请求提交上传图片表单并预览图片

最新推荐文章于 2021-04-27 15:41:54 发布
最新推荐文章于 2021-04-27 15:41:54 发布
阅读量502 收藏 1
点赞数
原

ajax异步请求提交上传图片表单并预览图片

一、表单上传文件必须加上enctype="multipart/form-data"，（以下是上传文件的表单）

[html] view plain copy
print ?
  1. <form action="<%=basePath%>UploadImage" method="post" id="uploadForm" enctype="multipart/form-data">  
  2.     <input type="hidden" name="picture" value="uploadpic">  
  3. <table width="100%" border="0" cellspacing="0" cellpadding="0">  
  4.     <tr>  
  5.             <td width="18%" background="<%=basePath%>tab/images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">上传照片</span></div></td>  
  6.            <td bgcolor="#FFFFFF">  
  7.             <input type="file" id="pic" name="pic" />   
  8.             <input type="button" value="上传" onclick="doUpload();">  
  9.            </td>  
  10.         </tr>  
  11. </table>  
  12. </form>  
 <form action="<%=basePath%>UploadImage" method="post" id="uploadForm" enctype="multipart/form-data">
  	<input type="hidden" name="picture" value="uploadpic">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
          	<td width="18%" background="<%=basePath%>tab/images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">上传照片</span></div></td>
            <td bgcolor="#FFFFFF">
            	<input type="file" id="pic" name="pic" /> 
            	<input type="button" value="上传" οnclick="doUpload();">
            </td>
         </tr>
	</table>
	</form>


二、但是使用ajax直接提交表单的数据，在后台会无法获取，因为ajax无法上传文件，经过在网上查阅资料，发现使用ajax提交文件表单必须按照如下代码：（上传按钮单击事件）

[javascript] view plain copy
print ?
  1. <script type="text/javascript">  
  2.     function doUpload() {    
  3.      var formData = new FormData($( "#uploadForm" )[0]);    
  4.      $.ajax({    
  5.           url: '<%=basePath%>UploadImage' ,  /*这是处理文件上传的servlet*/  
  6.           type: 'POST',    
  7.           data: formData,    
  8.           async: false,    
  9.           cache: false,    
  10.           contentType: false,    
  11.           processData: false,    
  12.           success: function (returndata) {    
  13.               document.getElementById("showpic").src="<%=basePath%>UploadImage?picture=showpic";/*这是预览图片用的，自己在文件上传表单外添加*/  
  14.           },    
  15.           error: function (returndata) {    
  16.               alert(returndata);    
  17.           }    
  18.      });    
  19. }    
  20. </script>  
<script type="text/javascript">
	function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  
     $.ajax({  
          url: '<%=basePath%>UploadImage' ,  /*这是处理文件上传的servlet*/
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              document.getElementById("showpic").src="<%=basePath%>UploadImage?picture=showpic";/*这是预览图片用的，自己在文件上传表单外添加*/
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}  
</script>
三 处理上传图片的servlet

[java] view plain copy
print ?
  1. package com.action;  
  2.   
  3. import java.io.File;  
  4. import java.io.FileInputStream;  
  5. import java.io.IOException;  
  6. import java.io.OutputStream;  
  7.   
  8. import javax.servlet.ServletException;  
  9. import javax.servlet.annotation.MultipartConfig;  
  10. import javax.servlet.annotation.WebServlet;  
  11. import javax.servlet.http.HttpServlet;  
  12. import javax.servlet.http.HttpServletRequest;  
  13. import javax.servlet.http.HttpServletResponse;  
  14. import javax.servlet.http.HttpSession;  
  15. import javax.servlet.http.Part;  
  16.   
  17. import com.google.gson.Gson;  
  18.   
  19.   
  20. @WebServlet("/UploadImage")  
  21. @MultipartConfig      
  22. public class UploadImage extends HttpServlet {  
  23.     private static final long serialVersionUID = 1L;  
  24.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  25.         doPost(request, response);  
  26.     }  
  27.   
  28.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  29.         System.out.println("---这里是上传图片的servlet----");  
  30.         String picflag = request.getParameter("picture");  
  31.         String picPath = null;  
  32.         if("uploadpic".equals(picflag)){  
  33.             System.out.println("----上传----");  
  34.             Part part = request.getPart("pic");//前台的文件标签的name,若ajax直接提交表单，这里无法获取  
  35.             String file = part.getHeader("Content-Disposition");  
  36.             //获取文件名  
  37.             String fileName = file.substring(file.lastIndexOf("=")+2, file.length()-1);  
  38.             System.out.println(fileName);  
  39.             //获取项目的部署路劲  
  40.             String basePath = getServletContext().getRealPath("/");  
  41.             System.out.println(basePath);  
  42.             picPath = basePath+fileName;  
  43.             //上传文件到部署路劲  
  44.             part.write(basePath+fileName);  
  45.             //将路径存在session中方便下面显示是用  
  46.             request.getSession().setAttribute("PIC", picPath);  
  47.             //以下代码是使用了  AJax异步请求时使用的  
  48.             Gson gson = new Gson();//创建gson对象  
  49.             response.setContentType("text/json;charset=utf-8");//设置响应的方式为json  
  50.             response.getWriter().print(gson.toJson("<font color=red>用户名或密码错误</font>"));  
  51. //          response.getWriter().write("<script>window.location.href='MyOffice/addPic.jsp';</script>");  
  52.         }else if("showpic".equals(picflag)){  
  53.             System.out.println("这里是上传图片里面显示图片的servlet");  
  54.             //从前台获取图片的路劲（部署项目的根路径）此路劲必须包含到图片，  
  55.             //如D:\My\SOFTWORE\apache-tomcat-7.0.52\wtpwebapps\imas\111.gif  
  56. //          String picPath = request.getParameter("picpath");  
  57.             Object obj = request.getSession().getAttribute("PIC");  
  58.             String picpath = null;  
  59.             if(obj != null && obj instanceof String){  
  60.                 picpath = (String) obj;  
  61.             }  
  62.             System.out.println(picpath);  
  63.             //以该路劲创建一个新文件，只需要找到图片的路劲就可以  
  64.             File file = new File(picpath);  
  65.             response.setCharacterEncoding("gb2312");  
  66.             response.setContentType("doc");  
  67.             response.setHeader("Content-Disposition", "attachment; filename=" + new String(file.getName().getBytes("gb2312"),"iso8859-1"));  
  68.   
  69.             System.out.println(new String(file.getName().getBytes("gb2312"),"gb2312"));  
  70.   
  71.             OutputStream output = null;  
  72.             FileInputStream fis = null;  
  73.             try{  
  74.                 output = response.getOutputStream();  
  75.                 fis = new FileInputStream(file);  
  76.           
  77.                 byte[] b = new byte[1024];  
  78.                 int i = 0;  
  79.           
  80.                 while((i = fis.read(b))!=-1){  
  81.                     output.write(b, 0, i);  
  82.                 }  
  83.                 output.write(b, 0, b.length);  
  84.           
  85.                 output.flush();  
  86.                 response.flushBuffer();  
  87.             }  
  88.             catch(Exception e){  
  89.                 System.out.println("Error!");  
  90.                 e.printStackTrace();  
  91.             }  
  92.             finally{  
  93.                 if(fis != null){  
  94.                     fis.close();  
  95.                     fis = null;  
  96.                 }if(output != null){  
  97.                     output.close();  
  98.                     output = null;  
  99.                 }  
  100.             }  
  101.   
  102.         }  
  103.           
  104.           
  105.     }  
  106.   
  107. }  
package com.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
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 javax.servlet.http.Part;

import com.google.gson.Gson;


@WebServlet("/UploadImage")
@MultipartConfig	
public class UploadImage extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("---这里是上传图片的servlet----");
		String picflag = request.getParameter("picture");
		String picPath = null;
		if("uploadpic".equals(picflag)){
			System.out.println("----上传----");
			Part part = request.getPart("pic");//前台的文件标签的name,若ajax直接提交表单，这里无法获取
			String file = part.getHeader("Content-Disposition");
			//获取文件名
			String fileName = file.substring(file.lastIndexOf("=")+2, file.length()-1);
			System.out.println(fileName);
			//获取项目的部署路劲
			String basePath = getServletContext().getRealPath("/");
			System.out.println(basePath);
			picPath = basePath+fileName;
			//上传文件到部署路劲
			part.write(basePath+fileName);
			//将路径存在session中方便下面显示是用
			request.getSession().setAttribute("PIC", picPath);
			//以下代码是使用了	AJax异步请求时使用的
			Gson gson = new Gson();//创建gson对象
			response.setContentType("text/json;charset=utf-8");//设置响应的方式为json
			response.getWriter().print(gson.toJson("<font color=red>用户名或密码错误</font>"));
//			response.getWriter().write("<script>window.location.href='MyOffice/addPic.jsp';</script>");
		}else if("showpic".equals(picflag)){
			System.out.println("这里是上传图片里面显示图片的servlet");
			//从前台获取图片的路劲（部署项目的根路径）此路劲必须包含到图片，
			//如D:\My\SOFTWORE\apache-tomcat-7.0.52\wtpwebapps\imas\111.gif
//			String picPath = request.getParameter("picpath");
			Object obj = request.getSession().getAttribute("PIC");
			String picpath = null;
			if(obj != null && obj instanceof String){
				picpath = (String) obj;
			}
			System.out.println(picpath);
			//以该路劲创建一个新文件，只需要找到图片的路劲就可以
			File file = new File(picpath);
			response.setCharacterEncoding("gb2312");
			response.setContentType("doc");
			response.setHeader("Content-Disposition", "attachment; filename=" + new String(file.getName().getBytes("gb2312"),"iso8859-1"));

			System.out.println(new String(file.getName().getBytes("gb2312"),"gb2312"));

			OutputStream output = null;
			FileInputStream fis = null;
			try{
				output = response.getOutputStream();
				fis = new FileInputStream(file);
		
				byte[] b = new byte[1024];
				int i = 0;
		
				while((i = fis.read(b))!=-1){
					output.write(b, 0, i);
				}
				output.write(b, 0, b.length);
		
				output.flush();
				response.flushBuffer();
			}
			catch(Exception e){
				System.out.println("Error!");
				e.printStackTrace();
			}
			finally{
				if(fis != null){
					fis.close();
					fis = null;
				}if(output != null){
					output.close();
					output = null;
				}
			}

		}
		
		
	}

}

四 效果图

上传前



shine0112
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现图片上传并预览并提交ajax（完整demo）
03-31
JavaScript实现图片上传并预览并提交AJAX是一个常见的前端功能，尤其在现代Web应用中，用户经常需要上传图片。这个完整DEMO展示了如何利用JavaScript、AJAX和HTML5的File API来实现这一过程。以下是对这个功能的详细...
servlet上传图片到服务器以及Ajax异步上传
qq_44716544的博客
03-28 618
前端代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht...
ajax上传图片(servlet)
zw7534313的专栏
06-29 449
 &lt;form name="upfile_form" action="UploadServlet" method="POST" enctype="multipart/form-data"&gt; &lt;p&gt;input file title：   &lt;input type="text" name="file_title" /&
ajax+servlet实现文件上传
qq_38046742的博客
04-02 2289
用ajax实现文件上传需要两个jar包 html代码 图片上传 js代码（需要添加jquery依赖） servlet代码 //文件上传 public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { reque...
Servlet + Ajax 实现异步上传文件（图片）
一只程序猿的博客
04-27 816
Html： <form id="avatarForm" enctype="multipart/form-data" method="post"> <img id="avatar" onclick="chooseAvatar()" title="点击上传头像" class="avatar" src="image/avatar.jpg"> <input id="loadAvatar" name="loadAvatar" type="file"
Servlet实现文件上传 2种上传方式@ MultipartConfig
零学IT
05-24 6643
这里写链接内容Hello,大家好，很高兴来看老邢教程，今天咱们来聊一聊Servlet3.0的文件上传，3.0JAVA源生支持文件上传。 文件上传，我们需要在表单或HTTPURLConnection中设置请求方式为POST并且还需要设置消息头enctype=”multipart/form-data”（作用是将文件对应的内容以二进制的形式传递给后台）
预览+ajax图片异步多图上传
06-20
在图片上传场景中，Ajax可以避免传统表单提交导致的页面刷新，提高用户体验。使用Ajax上传图片时，我们通常会创建一个XMLHttpRequest对象，设置请求头和参数，然后调用`open()`和`send()`方法发送请求。服务器处理完...
SpringMVC+Ajax异步上传图片并显示(源码)
11-08
在本文中，我们将深入探讨如何使用SpringMVC和Ajax实现异步上传图片并实时显示的功能。这个技术组合常用于Web应用开发中，提供流畅的用户体验，避免页面刷新带来的不便。 首先，SpringMVC是Spring框架的一部分，专...
ajax图片上传，图片异步上传，更新实例
08-31
通过使用XMLHttpRequest对象作为后台与服务器端通信的桥梁，Ajax可以在用户与服务器交互时发送异步请求，获取数据并更新页面的特定部分。 在图片异步上传中，Ajax通常与JavaScript库如jQuery结合使用，简化了操作。...
thinkPHP利用ajax异步上传图片并显示、删除的示例
10-17
在本示例中，我们将探讨如何使用ThinkPHP框架与AJAX技术实现异步上传图片并在页面上显示，以及提供删除图片的功能。ThinkPHP是一个流行的PHP框架，它为开发者提供了便捷的MVC（Model-View-Controller）结构和丰富的...
ajax异步批量上传文件demo
07-12
这个是使用JavaScript中FormData格式化表单数据使之成为key/value，使用ajax异步上传数据的demo。 包含html和服务端解析数据并保存文件
java文件、图片上传（表单、Ajax）
01-23
两种提交方式，一种是表单，一种是Ajax（选择图片时直接显示出来、可进行文件类型判断和重命名），附jar，直接eclipse导入就能使用。可以改成收取文件的简单的期末作业。
ajaxForm异步提交表单（含图片）
08-13
ajaxForm异步提交表单（含图片）ajaxForm异步提交表单（含图片）ajaxForm异步提交表单（含图片）
java jsp ajax实现上传文件进度条(详细代码和文档)
09-22
要实现进度条的显示,就要知道两个参数，上传的大小和总文件的大小 重写的解析器提供了一个上传过程事件，在上传过程中不断触发，然后用已上传的大 小/总大小,计算上传的百分比,然后将此数据缓存起来，前端发送异步请求查询数据接口，用这个百分比控制div框的显示，就可以实现上传的进度条效果
ajax异步实现图片上传
01-04
使用ajaxfileupload.js,实现图片异步上传,导入项目即可使用.
怎么用异步ajax提交表单来上传图片文件？
milli236的博客
06-11 3668
通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。 但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的...
Ajax实现图片上传并预览
热门推荐
An丶的博客
09-30 10万+
效果见尾部。 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现，但是还是觉得自己写比较好。我们知道，图片上传需要一个input:file表单 当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下，可以在点击图片的时候使用JS实现预览功能，并且楼主也是这样做的。代码如下： function getFileUrl(source
Ajax实现异步上传图片
萌神30号 ↝
02-14 5万+
目标：Ajax实现异步上传图片 要求：点击页面浏览按钮后，选择需要上传的图片，页面无刷新，将上传的图片展示出来 开发流程 一：在页面编写表单代码和js代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD X...
React+AJAX+Java 实现图片上传与预览：无jQuery示例
本文档主要介绍了如何在React应用中结合Ajax和Java技术实现上传图片并预览的功能。作者提到，在许多资源中，常见的做法是使用jQuery来处理图片上传，但在本文中，作者选择了一个更为简洁的方式，即利用JavaScript和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值