首页 / AJAX / Ajax进行文件与其他参数的上传功能

Ajax进行文件与其他参数的上传功能

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Ajax进行文件与其他参数的上传功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9781字，纯文字阅读大概需要14分钟。

内容图文

记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的操作，现在分享给大家，希望大家能有有所帮助。本文主要介绍了使用Ajax进行文件与其他参数的上传功能(java开发),非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。

文件上传：

操作步骤：

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">
<p class="main">
 <!--页面主体 start-->
 <p class="main_content">
  <p class="later_index clear wrap">
   <p class="later_right fr">
    <p class="roll_parent" id="roll_parent">
     <p class="scroll_parent" id="scroll_parent">
      <p class="scroll" id="scroll"></p>
     </p>
     <p class="roll_son" id="roll_son">
      <p class="later_content later_content1">
       <p class="release_name">
        <h3>
         <span>发布资讯</span>
        </h3>
       </p>
       <p 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>
             <p class="next_select select_width select_bg" id="next_select0">
              <span id="type_span_info">请选择</span>
             </p>
             <p 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>
             </p>
            </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>
       </p>
       <p class="financial_pro_icon">
        <p class="financial_pro_icon_l issue_btn1">
         <a href="javaScript:save();">发布</a>
        </p>
        <p class="financial_pro_icon_r issue_btn1">
         <a href="${ctx}/info/gotoInfo?index=2">取消</a>
        </p>
       </p>
      </p>
     </p>
    </p>
   </p>
  </p>
 </p>
 <!--页面主体 end-->
</p>
</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进行文件与其他参数的上传功能全部内容，希望文章能够帮你解决Ajax进行文件与其他参数的上传功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/140110.html

来源：【匿名】

【上一篇】yii2modal弹窗之ActiveForm实现ajax表单异步验证【下一篇】AJAX for PHP简单表数据查询实例

更多 ►

【Ajax进行文件与其他参数的上传功能】教程文章相关的互联网学习教程文章

jQuery+AJAX实现网页无刷新上传【代码】

新年礼，提供简单、易套用的 jQuery AJAX上传示例及代码下载。后台对文件的上传及检查，以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。有时做一个网站项目 (不论是否 ASP.NET)，内附的 FileUpload 控件，功能不足 (页面必须刷新、不支援 AJAX)，或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例，如： jQuery File Upload，但功能太强大、外观复杂，欲仅取出部分功能来引用，反而不易。因...

ajaxfileupload 文件上传

先引用 ajaxfileupload.js 没有自己去csdn下接下来是HTML <input type="file" id="file1" name="file" style="display: none" accept="image/x-png,image/gif,image/jpeg,image/bmp" multiple="multiple" /> <button type="button" class="btn btn-info" id="btnFile"><i class="fa fa-cloud-upload"> 上传</i></button>其中 accept 可以指定上传格式 multiple="multiple" 此属性可进行多文件选择 JS部分 $("#btnFile").c...

使用FormData实现ajax文件异步上传【代码】【图】

1.传统的web开发文件上传一般是基于form表单的文件上传，同步的方式，用户体验差，可控性也差2.异步上传的实现有以下方式 2.1 借助浏览器插件一般需要安装一些类似flash的插件这种方式缺点：需要安装插件优点：可控性强，性能高 2.2 这种是伪异步上传，借助表单向隐藏的iframe提交，然后通过iframe通信操作当前页面这种方式可控行查，体验一般，见下面代码 2.3 借助html5 里的 FormData 对象，可实现进度控制，异步的...

ajax上传图片加裁剪作为头像

网上功能一大把。但是听说一个常用的（经常被搜到的）Jcorp+uploadify 用在laravel 里会报302错误。不知道哪个版本的jcorp 哪个版本的uploadify 哪个版本的laravel 仔细想想uploadify 与laravel 冲突可能性又大又不大。算了时间有限+uploadify 太重（偷懒的借口）直接用另一个方案：http://www.cnblogs.com/abel/archive/2013/07/24/3213409.htmlhttp://blog.csdn.net/zhangfei8625/article/details/43057163原文：http://www.cnb...

ajax上传进度条

ajax上传文件，并检查文件类型、检查文件大小【代码】

1、使用ajaxfileupload.js的插件，但是对插件做了一处修改，才能够正常使用　　修改的部分如下： 1 2 uploadHttpData: function (r, type) {3 var data = !type;4 data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script", eval it in global context5 if (type == "script")6 jQuery.globalEval(data); // Get the JavaScript object, if ...

spring mvc 用ajaxSubmit 在iE8上传文件变下载的问题

前端代码<form method="post" enctype="multipart/form-data" id="cooperatorIdentityBackPhotoForm"> <label class="Con_Label">法人身份证反面</label> <div class="Con_Input"> <input type="file" id="IdDn" class="file" size="1" onchange="FileValue(this.id)" name="cooperatorIdentityBackPhoto"> <input type="button" id="IdDn1" value="浏览" class="file_button" name="cooperatorIdentityBackPh...

AJAX大文件切割上传以及带进度条。

分块传输的原理就是利用HTML5新增的文件slice截取函数。代码如下：html：<input id="f" type="file" name="part" onchange="writeFile()">JS：核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去写，但是核心是不会变的。var writeFile = function(){ 　　var temp = null; 　　var formData = null; 　　var xhr = null; 　　var file = document.getElementById(‘f...

使用Ajax.BeginForm 中需要上传文件但 Request.files获取不到

使用Mvc里的插件jquery.unobtrusive-ajax.min.js之前一直困在这里，一开始以为添加属性enctype="multipart/form-data"就可以网上看到都是用另外一个插件jquery.form.js于是，从某篇文章的附件中下载了jquery.form.js，弄了许久，还不行，顿时泪崩了，最后在官网下载最新的jquery.form.js就解决了 ==||原文：http://www.cnblogs.com/Sunlimi/p/3886006.html

ajax异步实现文件分片上传【代码】

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JS分片上传-极速上传</title> </head> <body><input type="file" name="slice" id="slice" ><div id="output"> </div> <br/> </body> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">$("#slice").change(function(event) {var file = $("#slice")[0].files[0];var name = f...

h5图片上传简易版（FileReader+FormData+ajax）【代码】【图】

一、选择图片（input的file类型）<input type="file" id="inputImg">1. input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口；file类型的input会有files属性，保存着文件的相关信息。2. input.files是一个数组，由传入的file对象组成。每个file对象包含以下属性：lastModified：数值，表示最近一次修改时间的毫秒数；lastModifiedDate：对象，表示最后一次修改时间的Date对象（高程中说是字符串，根据上图可看...

ajaxSubmit 文件上传【代码】

from 设定(input根据自己情况而定)，enctype="multipart/form-data"一定要设定，否则默认只提交文本rm method="post" enctype="multipart/form-data"> -->"ajaxSubmit 需引入jquery.form.js$("#xx_User_content_qianming").ajaxSubmit({type: ‘POST‘, url: ‘后台方法路径‘, success: function (result) {console.log(result);if (result.s) {com.message(‘s‘, result.message);km.xx_User.reload();} else {com.message(‘...

兼容ie的jquery ajax文件上传【代码】【图】

Ajax文件上传插件很多，但兼容性各不一样，许多是对ie不兼容的，另外项目中是要求将网页内容嵌入到桌面端应用的，这样就不允许带flash的上传插件了，如：jquery uploadify。。。悲剧对于Ajax文件上传，大体是有：　　1、创建一个input type="file" 的文件上传按钮，根据其id监听绑定其change事件，在事件中用jquery创建一个iframe，嵌入添加隐藏form，同时创建input type="file"，id相同的文件上传按钮，并传入其他需要提交的数据...

jQuery AJAX 网页无刷新上传示例【代码】【图】

新年礼，提供简单、易套用的 jQuery AJAX 上传示例及代码下载。后台对文件的上传及检查，以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP)。有时做一个网站项目 (不论是否 ASP.NET)，内附的 FileUpload 控件，功能不足 (页面必须刷新、不支援 AJAX)，或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例，如： jQuery File Upload，但功能太强大、外观复杂，欲仅取出部分功能来引用，反而不易。因...

formData + ajax +springMVC实现文件上传【代码】【图】

实际开发过程中经常会遇到这样的需求，文件上传，但不需要表单提交，这里可以通过formData来实现参考资料:http://yunzhu.iteye.com/blog/2177923http://www.jianshu.com/p/46e6e03a0d53//需要支持多文件上传的需要添加multiple 属性<input type="file" class="update_btn excel_btn" multiple />js代码如下<!-- 用于上传文件 ,可实现同时上传过个文件-- 　　后台处理代码如下： /** 实现同时上传多个文件* MultipartFile[] files...

首页 / AJAX / Ajax进行文件与其他参数的上传功能

Ajax进行文件与其他参数的上传功能

内容导读

内容图文

内容总结

内容备注

内容手机端

【Ajax进行文件与其他参数的上传功能】教程文章相关的互联网学习教程文章

jQuery+AJAX实现网页无刷新上传【代码】

ajaxfileupload 文件上传

使用FormData实现ajax文件异步上传【代码】【图】

ajax上传图片加裁剪作为头像

ajax上传进度条

ajax上传文件，并检查文件类型、检查文件大小【代码】

spring mvc 用ajaxSubmit 在iE8上传文件变下载的问题

AJAX大文件切割上传以及带进度条。

使用Ajax.BeginForm 中需要上传文件但 Request.files获取不到

ajax异步实现文件分片上传【代码】

h5图片上传简易版（FileReader+FormData+ajax）【代码】【图】

ajaxSubmit 文件上传【代码】

兼容ie的jquery ajax文件上传【代码】【图】

jQuery AJAX 网页无刷新上传示例【代码】【图】

formData + ajax +springMVC实现文件上传【代码】【图】

AJAX - 相关标签

参数 - 相关标签

功能 - 相关标签

AJAX - 技术教程分类

AJAX - 最新教程

AJAX - 最热教程