使用Ajax进行文件与其他参数的上传功能(java开发)

2024-12-06 18:58:19

文件上传：

记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的操作，现在分享给大家，希望大家能有有所帮助。

操作步骤：

1 导入jar包：

我们在使用文件上传时，需要使用到两个jar包，分别是commons-io与commons-fileupload，在这里我使用的两个版本分别是2.4与1.3.1版本的，需要使用JS文件与jar包最后会发给大家一个连接（如何失效请直接我给留言，我会及时更改，谢谢）。

2 修改配置文件：

当我们导入的jar包是不够的，我们需要使用到这些jar包，由于我当时使用的是SSM框架，所以我是在application-content.xml中配置一下CommonsMultipartResolver，具体配置方法如下：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <property name="maxUploadSize">
   <value>104857600</value>
  </property>
  <property name="maxInMemorySize">
   <value>4096</value>
  </property>
 </bean>

3 JSP文件：

大家对form表单提交问价的方式很熟悉，但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交，Ajax有很多的好处，比如当我们不需要刷新页面获希望进行局部刷新的时候，我们就可以使用Ajax。下面是我的表单提交的JSP页面，其中包含JS的详细步骤和HTML文件：

<%@ page language="java" contentType="text/html; charset=GBK"
 pageEncoding="GBK"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../commons/taglibs.jsp"%>
<!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=GBK">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>发布资讯</title>
 <script type="text/javascript" src="${ctx}/resources/new_js/jquery.js"></script>
 <script type="text/javascript" src="${ctx}/resources/js/ajaxfileupload.js"></script>
 <script type="text/javascript">
 function save(){
  var typeId = $("#type_span_info").attr("data-id");
   if (typeof (typeId) == "undefined") {
   $("#type_p_info").show();
   return;
  } else {
   $("#type_p_info").hide();
  }
  var title = $("#title_input_info").val();
  var summary = $("#summary_input_info").val();
  var content = $("#content_textarea_info").val();
  $.ajaxFileUpload({
   url : "${ctx}/info/doUpload",
   secureuri : false,//是否需要安全协议
   fileElementId : 'file',
   type : 'POST', //文件提交的方式
   dataType : 'string',
   cache : false, //是否进行页面缓存
   async : true, // 是否同步提交
   success : function(data) {
     $.ajax({
     url : '${ctx}/info/addInfo?fileUrl='+data,
     type : 'post',
     data:{title:title,summary:summary,content:content,typeId:typeId},
     async : false,
     success : function(result) {
      if (result == 1) {
       $("#del_prompt_p").text("添加成功");
       fnError3();
      } else if (result == 2) {
       $("#del_prompt_p").text("添加失败")
       fnError2();
      } else {
       $("#del_prompt_p").text("系统错误");
       fnError2();
      }
     }
    });
   }
   });
 }
 </script>
</head>
<body class="body_bg">
<div class="main">
 <!--页面主体 start-->
 <div class="main_content">
  <div class="later_index clear wrap">
   <div class="later_right fr">
    <div class="roll_parent" id="roll_parent">
     <div class="scroll_parent" id="scroll_parent">
      <div class="scroll" id="scroll"></div>
     </div>
     <div class="roll_son" id="roll_son">
      <div class="later_content later_content1">
       <div class="release_name">
        <h3>
         <span>发布资讯</span>
        </h3>
       </div>
       <div class="issue_content">
        <form action="" id="form1" method="post" enctype="multipart/form-data">
         <table class="issue_tab">
          <tbody>
           <tr>
            <td><p><i>*</i><strong>标题</strong></p>
            </td>
           </tr>
           <tr>
            <td><input id="title_input_info" name="title_input_info" type="text" placeholder="最多可以输入40个字" type="text" maxlength="40"/>
            <!-- <span class="colse"></span> -->
            <p class="colse_tip"></p>
            <!-- <p class="colse_tip" id="title_p_info" style="display:hidden;">请选择标题！</p> -->
            </td>
           </tr>
           <tr>
            <td><p><i>*</i><strong>摘要</strong></p></td>
           </tr>
           <tr>
            <td><input name="summary_input_info" id="summary_input_info" type="text" placeholder="最多可以输入100个字" type="text" maxlength="100" />
            <p class="colse_tip"></p></td>
           </tr>
           <tr>
            <td><p><i>*</i><strong>内容</strong></p>
            </td>
           </tr>
           <tr>
            <td><textarea name="content_textarea_info" id="content_textarea_info"></textarea>
            <p class="colse_tip"></p></td>
           </tr>
           <tr>
            <td><p><i>*</i><strong>选择行业</strong></p>
            <p class="colse_tip" id="type_p_info" style="display:hidden;">请选择行业！</p></td>
           </tr>
           <tr>
            <td>
             <div class="next_select select_width select_bg" id="next_select0">
              <span id="type_span_info">请选择</span>
             </div>
             <div class="select_box select_top select_width" data-id="" id="select_box0">
              <ul>
               <li class="curr" data-id="2">化工</li>
               <li data-id="3">装备制造</li>
               <li data-id="4">生物医药</li>
               <li data-id="5">电子信息</li>
               <li data-id="6">其他</li>
              </ul>
             </div>
            </td>
           </tr>
           <tr>
            <td>
             <input type="button" class="isue_inp_btn" value="添加图片"/>
             <input type="text" id="issue_input_text" class="issue_text" />
             <input type="file" id="file" name="file" class="issue_file" onchange="javaScript:validate_img(this)" />
            </td>
           </tr>
          </tbody>
         </table>
        </form>
       </div>
       <div class="financial_pro_icon">
        <div class="financial_pro_icon_l issue_btn1">
         <a href="javaScript:save();">发布</a>
        </div>
        <div class="financial_pro_icon_r issue_btn1">
         <a href="${ctx}/info/gotoInfo?index=2">取消</a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <!--页面主体 end-->
</div>
</body>
</html>

上面的代码是我在项目实际开发的过程中所用的代码，具体的CSS文件与JS文件我已经删掉了，但是不会影响具体的操作，大家使用的时候只需要把其中的class文件删掉了就可以了。好了，我们在说一说上面的代码。首先为大家解释一下ctx的作用，在我们项目开发的过程中，我们要求必须使用绝对路径，所有{ctx}是我们封装好的一个东西，就是我们的服务器地址+端口号+项目名称。当我们使用的时候，只需要引用一下文件，就是上面直接使用的<%@ include file=”../commons/taglibs.jsp”%>，当我们用的时候直接使用${ctx}就可以，大家在使用的时候就直接使用自己的本机地址端口号与项目名称就可以。后面的/resources/new_js/jquery.js就是我们要使用的jqery.js文件的存放地址。
其实在上面的Ajax的操作中，我相当于做了两次的Ajax的提价，但是在第一次提交的时候，后台给我们返回一个参数，就是我们的文件存放路径与文件名称，在第二次提交的时候，我们将这些参数与其他参数同时上传到后台，并将这些参数保存到数据库中，以便我们使用。

* 4 后台代码：

//文件上传
@RequestMapping(value = "/doUpload", method = RequestMethod.POST, produces = "text/html; charset=UTF-8")
@ResponseBody
 public String doUpload(HttpServletRequest request, HttpServletResponse response) throws IOException {
  List<String> fileNames = null;
  if (request instanceof MultipartHttpServletRequest) {
   // process the uploaded file
   logger.info("=====进入文件类型选择=====");
   fileNames = uploadAttachment(request, "file");
  }
  String url = "";
  if (fileNames.size() > 0) {
   for (int i = 0; i < fileNames.size(); i++) {
    url = url + fileNames.get(i);
    if(i < fileNames.size() - 1){
     url = url + ",";
    }
   }
  }
  return url;
 }
//文件上传的工具类
public List<String> uploadAttachment(HttpServletRequest request, String type) throws IOException {
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  List<MultipartFile> files = multipartRequest.getFiles(type);
  logger.info("数据长度========>>>>>>>>>>" + files.size());
  Calendar now = Calendar.getInstance();
  int year = now.get(Calendar.YEAR);
  int month = now.get(Calendar.MONTH) + 1;
  String realPath = PropertiesUtil.getProperty("realPath");
  System.err.println("realpath=====>>>>>" + realPath);
  //String savePath = request.getSession().getServletContext().getRealPath("/") + "p_image\\" + type + "\\" + year+ "\\" + month + "\\";
  String savePath = "government"+ File.separator + "image"+ File.separator + year+ File.separator + month + File.separator;
  logger.info("保存路径=====>" + savePath);
  List<String> fileNames = new ArrayList<String>();
  for (MultipartFile multipartFile : files) {
   logger.info("--" + multipartFile.getOriginalFilename());
   String fileName = multipartFile.getOriginalFilename();
   String prefix = fileName.substring(fileName.lastIndexOf(".") + 1);
   String custName = "" + System.currentTimeMillis() + "." + prefix;
   if (UsedUtil.isNotNull(fileName)) {
    File targetFile = new File(realPath+savePath, custName);
    // fileName = year+"-"+month+"-"+fileName;
    if (!targetFile.exists()) {
     targetFile.mkdirs();
     multipartFile.transferTo(targetFile);
    }
    try {
    } catch (Exception e) {
     e.printStackTrace();
    }
    fileNames.add(savePath + custName);
   }
  }
  return fileNames;
 }
//添加咨询
@RequestMapping(value = "/addInfo", method = RequestMethod.POST)
@ResponseBody
 public Integer addInfo(HttpServletRequest request, HttpServletResponse response,
   @RequestParam String fileUrl) {
  InfoBean bean = new InfoBean();
  if(UsedUtil.isNotNull(fileUrl)){
   bean.setImagePath(fileUrl);
  }
  Map<String, Object> paramMap = ControllerUtil.request2Map(request);
  bean.setTitle((String) paramMap.get("title"));
  bean.setSummary((String) paramMap.get("summary"));
  bean.setContent((String) paramMap.get("content"));
  bean.setTypeId((String)paramMap.get("typeId"));
  return infoService.insInfo(bean);
 }

在上面的代码中我们可以看到，在文件第一次上传的过程中，我们首先进入到doUpload中，然后使用uploadAttachment工具类，并将文件上传到服务器中，在上传的过程中，我首先做了一个文件唯一名称的操作，就是获取当前时间的毫秒数，虽然不能绝对保证，但是到并发量小的时候可以保证不会造成文件名称重复。然后，我将文件上传的路径的上传地址写到了.properties中，这样的好处是当我们想更换文件上传的路径时，我们就可以直接修改.properties文件，而读取.properties文件的具体方式在我的另一篇文章中讲到。最后，我们在开发的过程中，文件保存一般是保存到文件服务器中，而文件服务器一般是在Linux中，而在不同的服务器中，路径是使用斜杠还是反斜杠是不同的，所有我在这里面使用了File.separator来代替，File.separator在不同的系统中可以自动生成斜杠获反斜杠。

以上所述是小编给大家介绍的使用Ajax进行文件与其他参数的上传功能(java开发)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！

使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图: 1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to
AJAX省市区三级联动下拉菜单(java版)

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
Java中使用json与前台Ajax数据交互的方法

本文主要为大家分享了Ajax获取显示Json数据的一种方法,供大家参考,具体内容如下 1.首先前台用Ajax,其中注意dataType一定要选择json方式,Action成功返回给页面的Json内容是这样的[{"number":"V006","names":"LiLei"}],可见comment['names']对应"names":"LiLei",comment['number']对
ajax java 实现自动完成功能

百度建议给了我们极大的方便,就像我们跟人说话的时候,你点头他知尾,不用多费唇舌,这样我们与之相处久轻松愉悦. 都知道百度建议是用ajax做的,想要做的快速稳定,可复制可移植就不容易了.网上找了半天,好多都是asp或者php的,还有使用jquery的,但说明性文档太少,花时间研究还不如自己来写.根据一个pdf文档提供的资料,用了小半天时间,终于实现了.在此与大家分享. 原理流程图如下: 流程图很明白了,没什么要说的,以下帖代码. Javascript代码: 复制代码代码如下: var xmlH
Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
java AJAX实现级联下拉框

复制代码代码如下: package com.ajaxlab.ajax; import java.util.ArrayList; import java.util.Collection; import java.util.Iterator; import org.jdom.Document; import org.jdom.Element; import org.jdom.input.SAXBuilder; import com.ajaxlab.ajax.ProductClass; public
使用Ajax进行文件与其他参数的上传功能(java开发)

文件上传: 记得前一段时间,为了研究Ajax文件上传,找了很多资料,在网上看到的大部分是form表单的方式提交文件,对于Ajax方式提交文件并且也要提交表单中其他数据,发现提及的并不是很多,后来在同事的帮助下,使用ajaxfileupload最终完成了文件上传与其他提交的操作,现在分享给大家,希望大家能有有所帮助. 操作步骤: 1 导入jar包: 我们在使用文件上传时,需要使用到两个jar包,分别是commons-io与commons-fileupload,在这里我使用的两个版本分别是2.4与1
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配合Spring实现文件上传功能代码

由于项目需要,开发一个可以上传图片到服务器的web表单页面. 一. 需求 Web表单页面,可以通过表单上传图片以及其他文字信息. 二. 图片上传的流程之前没有做过这类页面,通过查询资料.发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径:之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中. 三. 方法由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传:第二种是先在前台将图片切割为较小的
Ajax serialize() 表单进行序列化方式上传文件

通过传统的 form 表单提交的方式上传文件 <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <p>上传文件:<input type ="file" name="file"/></p> <input type="subm
SpringMVC+Ajax实现文件批量上传和下载功能实例代码

今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了. 上传form: <form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload&q
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&
Ajax 给 XMLHttpReq.onreadystatechange传递参数

Ajax 给 XMLHttpReq.onreadystatechange传递参数通过: xmlhttp.onreadystatechange= function(){xx(123)}; or xmlhttp.onreadystatechange= new Function("xx(123)"); 就可以了. 复制代码代码如下: Ajax 给 XMLHttpReq.onreadystatechange传递参数通过: xmlhttp.onreadystatechange= funct
spring mvc 读取xml文件数据库配置参数的方法

本文主要介绍怎么通过属性注入与构造器注入实现把我们项目中要用到的数据库参数放到xml文件里面去,方便部署. spring mvc 4.2.6项目 SQL Server 2008数据库本文介绍的主要使用ApplicationContext以及其实现类实现.主要用到的是ClassPathXmlApplicationContext. ClassPathXmlApplicationContext:从类路径ClassPath中寻找指定的XML配置文件,找到并装载完成ApplicationContext
基于ajax实现文件上传并显示进度条

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

目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

使用Ajax进行文件与其他参数的上传功能(java开发)

相关推荐

随机推荐