基于jsp的AJAX多文件上传的实例

2024-10-20 05:12:20

最近的项目开发中，遇到了一个多文件上传的问题，即在不刷新页面的情况下，上传多个文件至服务器。现总结分享如下：

本文主要采用了基于jsp的ajax，jquery，servlet等技术。

1.upload.jsp

点击上传时，调用对应的fileupload函数，通过ajax将文件异步传送到servlet中处理。注意在文件上载时，所使用的编码类型应当是“multipart/form-data”，它既可以发送文本数据，也支持二进制数据上载。

<%@ page language="java" contentType="text/html; charset=utf-8" 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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
</head>
<script language="JavaScript" type="text/javascript">
  var buildph=0;
  var typeph=0;
  var planph=0;
  function fileupload1(){
    if($("#locationphoto").val()==""){
      alert("上传文件不能为空!");
      return false;
    }
    var file = $("#locationphoto").val();
    var pos=file.lastIndexOf("\\");
var fileName=file.substring(pos+1);//获得文件名字

    $.ajaxFileUpload({

        url:"PictureServlet";,
        contentType:"multipart/form-data; text/xml;charset=utf-8",
        secureuri:false,
        cache: false,//防止缓存
        fileElementId:'locationphoto',
        dataType: 'text/xml',
        success: function (data) {
          document.getElementById("locationspan").innerHTML = fileName;
          alert(fileName);
        },error: function (data, status, e){
          alert("fail");
        }
      }
    );
  }
  function fileupload2(){
    if($("#buildingphoto").val()==""){
      alert("上传文件不能为空!");
      return false;
    }
    var file = $("#buildingphoto").val();
    var pos=file.lastIndexOf("\\");
    var fileName=file.substring(pos+1);
    buildph++;
    $.ajaxFileUpload({

        url:"PictureServlet";,
        contentType:"multipart/form-data; text/xml;charset=utf-8",
        secureuri:false,
        cache: false,//防止缓存
        fileElementId:'buildingphoto',
        dataType: 'text/xml',
        success: function (data) {
          document.getElementById("buildingspan"+buildph).innerHTML = fileName;
          alert(fileName);
        },error: function (data, status, e){
          alert("fail");
        }
      }
    );
  }
  function fileupload3(){
    if($("#typePhoto").val()==""){
      alert("上传文件不能为空!");
      return false;
    }
    var file = $("#typePhoto").val();
    var pos=file.lastIndexOf("\\");
    var fileName=file.substring(pos+1);
    typeph++;
    $.ajaxFileUpload({

        url:"PictureServlet";,
        contentType:"multipart/form-data; text/xml;charset=utf-8",
        secureuri:false,
        cache: false,//防止缓存
        fileElementId:'typePhoto',
        dataType: 'text/xml',
        success: function (data) {
          document.getElementById("typespan"+typeph).innerHTML = fileName;
          alert(fileName);
        },error: function (data, status, e){
          alert("fail");
        }
      }
    );
  }
</script>
<body>
<form id="form1" name="form1" method="post" action="">
 <table width="663" height="316" align="center">
  <tr>
   <td height="30" colspan="2">楼盘位置图：
    <span id="locationspan" ></span>
   <input type="file" name="locationphoto" id="locationphoto" value="this.val()"/>
   <input type="button" name="fileLoad1" id="fileLoad1" value="上传" onClick="fileupload1()"/>
   </td>
  </tr>
   <tr>
   <td height="30" colspan="2">楼盘照片：
   <span id="buildingspan1" ></span>
   <span id="buildingspan2" ></span>
   <span id="buildingspan3" ></span>
   <span id="buildingspan4" ></span>
   <input type="file" name="buildingphoto" id="buildingphoto" value="this.val()"/>
   <input type="button" name="fileLoad2" id="fileLoad2" value="上传" onClick="fileupload2()"/>
   </td>
  </tr>
    <tr>
   <td height="30" colspan="2">楼盘户型图：
    <span id="typespan1" ></span>
    <span id="typespan2" ></span>
    <span id="typespan3" ></span>
    <span id="typespan4" ></span>
   <input type="file" name="typePhoto" id="typePhoto" value="this.val()"/>
   <input type="button" name="fileLoad3" id="fileLoad3" value="上传" onClick="fileupload3()"/>
   </td>
  </tr>
 </table>
</form>
</body>
</html>

2.PictureServlet.java

通过该servlet接受jsp上传的数据流，存储到相应路径，并解析出文件名。

package com.servlet;
import java.io.BufferedOutputStream;
import java.io.DataOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.ServletInputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.realty.base.action.BuildingAction;
/**
 * Servlet implementation class PictureServlet
 */
@WebServlet("/PictureServlet")
public class PictureServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  /**
   * @see HttpServlet#HttpServlet()
   */
  public PictureServlet() {
    super();
    // TODO Auto-generated constructor stub
  }
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doPost(request,response);
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
     response.setContentType("text/xml");//是xml
      response.setHeader("Cache-Control", "no-cache");
      response.setCharacterEncoding("UTF-8");
      String filepath ="E:/pic/";//文件上传的路径，实际开发中一般用相对路径
      String filename = "";
      String name="";
      ServletInputStream in = request.getInputStream();
      byte[] buf = new byte[4048];
      int len = in.readLine(buf, 0, buf.length);
      String f = new String(buf, 0, len - 1);
      while ((len = in.readLine(buf, 0, buf.length)) != -1) {
        filename = new String(buf, 0, len,"utf-8");//解决汉字乱码问题
        int j = filename.lastIndexOf("\"");
        int s = filename.indexOf("filename");
        name=filename.substring(s+10,j);
        filename = name;//通过上述处理可以得到上传的文件名
        System.out.println("filename="+filename);

        DataOutputStream fileStream = new DataOutputStream(new BufferedOutputStream(new FileOutputStream(filepath+ filename)));
        len = in.readLine(buf, 0, buf.length);
        len = in.readLine(buf, 0, buf.length);
        while ((len = in.readLine(buf, 0, buf.length)) != -1) {
          String tempf = new String(buf, 0, len - 1);
          if (tempf.equals(f) || tempf.equals(f + "--")) {
            break;
          }
          else{
             fileStream.write(buf, 0, len); // 写入
          }
        }
        fileStream.close();
      }
      PrintWriter out=response.getWriter();
      String result = filename ;
      out.print(result);
      out.close();
      in.close();
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jsp中点击图片弹出文件上传界面及预览功能的实现

花了两天时间琢磨一下图片预览的功能任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
jsp文件上传与下载实例代码

文件上传: 复制代码代码如下: public class UploadServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletR
servlet+JSP+mysql实现文件上传的方法

本文实例讲述了servlet+JSP+mysql实现文件上传的方法.分享给大家供大家参考,具体如下: 一.文件上传的基本操作: 1. 表单属性enctype的设置 multipart/form-data和application/x-www-form-urlencoded的区别 FORM元素的enctype属性指定了表单数据向服务器提交时所采用的编码类型,默认的缺省值是"application/x-www-form-urlencoded". 然而,在向服务器发送大量的文本.包含非ASCI
Jsp页面实现文件上传下载类代码第1/2页

刚才和lp看完电影,把jsp页面抽出class调整了一下.最近总上经典,是感觉既然当了斑竹,就该留下点什么.lp这几天也半开玩笑半生气的说,一回来就上经典,就发帖,你干脆娶经典作lp得了.想想,这几天是有点夸张,以后放慢速度了.保持1星期1帖吧,那样也能多想写,多总结些.发帖的初衷就是有时候看到有的朋友问的问题,似乎还没有走进java的门,希望这样的帖子,能对新手一点帮助,也就满足了.有时候随意的一段话,其实也是自己的一点经验,而有时候之所以絮絮叨叨,是想把问题说的清楚明白,让高手见笑了.因为在
AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c
利用jsp+Extjs实现动态显示文件上传进度

需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且能够根据后台的接收的数据量和处理的进度及时更新进度条. 分析:后台需要两个组件,uploadController.jsp用来接收并且处理数据,它会动态的把进度信息放到session,另一个组件processController.jsp用来更新进度条:当用户点"上传"之后,form被提交给u
JSP使用Common FileUpload组件实现文件上传及限制上传类型实例代码

1.将commons-fileupload-1.3.3.jar复制到Web应用的lib文件夹下,在WebRoot目录下创建limit.jsp页面,在该页面中添加一个文件域的表单,设置类型为 multipart/form-data.代码如下: <body> <h2>上传图书课件</h2> <form action="LimitFile" name="one" enctype="multipart/form-da
基于jsp的AJAX多文件上传的实例

最近的项目开发中,遇到了一个多文件上传的问题,即在不刷新页面的情况下,上传多个文件至服务器.现总结分享如下: 本文主要采用了基于jsp的ajax,jquery,servlet等技术. 1.upload.jsp 点击上传时,调用对应的fileupload函数,通过ajax将文件异步传送到servlet中处理.注意在文件上载时,所使用的编码类型应当是"multipart/form-data",它既可以发送文本数据,也支持二进制数据上载. <%@ page language="
基于AngularJS的拖拽文件上传的实例代码

随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>
基于ajax实现文件上传并显示进度条

下面给大家分享下基于ajax实现文件上传并显示进度条.在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏.form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到sessi
利用SpringMVC和Ajax实现文件上传功能

个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml
Ajax实现文件上传功能(Spring MVC)

本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下前端表单和 JQuery jsp/html代码使用JQury <script src="static/js/jquery-3.4.1.js"></script> 前端表单 <form id="form-avatar" enctype="multipart/form-data"> <p>请选择要上传的文件:</p&
js HTML5 Ajax实现文件上传进度条功能

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +
Ajax异步文件上传与NodeJS express服务端处理

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件异步上传的实现原理,顺带看了看进度条.图片预览等功能的实现,做一点简单的整理. 文件上传 HTML结构如下,一个file input和一个button.当点击"上传"按钮的时候,将file input选中的文件上传到服务器. <input type="file"
Ajax提交Form表单及文件上传的实例代码

前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了直接上代码: 首先是html: <form id = "f
JSP组件commons-fileupload实现文件上传

本文实例为大家分享了JSP使用commons-fileupload实现文件上传代码,供大家参考,具体内容如下 1.准备: 将commons-fileupload-1.1.zip和commons-io-1.1.zip复制到"\WEB-INF\lib"目录下 2.首先是Servlet:FileUpload.java package servlet; import java.io.File; import java.io.IOException; import java.io.PrintWr
php+ajax 文件上传代码实例

本文实例为大家分享了php+ajax 文件上传的具体代码,供大家参考,具体内容如下 html 代码 <form action="{pboot:form fcode=8}" method="post" id="t" enctype="multipart/form-data"> <input type="file" name='tables_a' id="tables" o

基于jsp的AJAX多文件上传的实例

相关推荐

随机推荐