ajax文件和文件其他属性进行上传给后台spring mvc

最新推荐文章于 2020-09-27 19:23:14 发布
最新推荐文章于 2020-09-27 19:23:14 发布
阅读量1.7k 收藏
点赞数
分类专栏： Java基础学习 工具使用 文章标签： spring ajax spring mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21413417/article/details/51946413
版权 
$(document).ready(function() {
    $('#lunbosubmit').on('click', function() {
        $.ajaxFileUpload({
            url : "http://localhost/ManageSystem/manager/upload",
            type : 'post',
            secureuri : false,
            fileElementId : 'myfile0',
            fileElementId : 'myfile1',
            fileElementId : 'myfile2',
            dataType : 'json',
            success : function(data) {
                debugger;
                var aihaoid = $('#aihaoid').val();
                var myfile = new Array();
                for(var i = 0; i < 3; i++)
                {
                        myfile[i] = data.info.split("&")[i];
                }
                var myurl0 = $('#url0').val()
                var myurl1 = $('#url1').val()
                var myurl2 = $('#url2').val()
                $.ajax({
                    url : "http://localhost/ManageSystem/manager/addpublicpic",
                    data : "{\"aihaoid\":\"" + aihaoid
                    + "\",\"myfile1\":\"" + myfile[0]
                    + "\",\"myurl1\":\"" + myurl0
                    + "\",\"myfile2\":\"" + myfile[1]
                    + "\",\"myurl2\":\"" + myurl1
                    + "\",\"myfile3\":\"" + myfile[2]
                    + "\",\"myurl3\":\"" + myurl2 + "\"}",
                    type : "post",
                    success : function(a) {
                        alert("成功");
                    },
                    error : function(){
                        alert("失败");    
                    }
                });

            },
            error : function(data, status, e) {
                alert("【服务器异常，请连续管理员！】" + e);
                HideLoadMask();
            }
        });

    });
});

如果是出现跨域，即不同端口或者不同IP进行访问，需要进行跨域的声明：

<!-- 解决XMLHttpRequest cannot load,跨域问题 -->
<meta http-equiv="Access-Control-Allow-Origin" content="*">

如果不是跨域直接url: ./manager/upload即可。
我的JSP：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 兼容IE8-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <!--设备宽度比例为1，实现响应式-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 解决XMLHttpRequest cannot load,跨域问题 -->
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>左左后台发布管理</title>

    <!--导入bootstrap的Css样式-->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <link href="css/base.css" rel="stylesheet">

    <link href="css/lunbo.css" rel="stylesheet">

</head>

<body>

<div class="top">
    <p>左左运动后台欢迎您</p>
</div>

<div class="leftbody">
    <ul class="nav nav-pills nav-stacked">
        <li role="presentation"><a href="index.jsp">主界面</a>
        </li>
        <li role="presentation" class="active"><a href="lunbo.jsp">轮播图</a>
        </li>
    </ul>
</div>

<div class="rightbody">
    <div class="righttitle">
        <h1>轮播图</h1>
    </div>
    <div>
        <!-- <div id="drop_area" style="min-width:300px;min-height:100px;border:3px dashed silver;text-align: center">将图片拖拽到此区域</div><div id="preview"></div> -->

        <h3 class="text-center">发布</h3>
        <div class="form-group">
            <label for="aihaoid" class="col-sm-2 control-label">爱好ID</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="aihaoid"
                       name="aihaoid">
            </div>
        </div>
        <div class="form-group">
            <label for="myfile1" class="col-sm-2 control-label">轮播图(1)</label>
            <div class="col-sm-3">
                <input type="file" class="form-control" id="myfile0"
                       name="myfiles">
            </div>
            <label class="col-sm-2 control-label">文章链接(1)</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="url0" name="url">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">轮播图(2)</label>
            <div class="col-sm-3">
                <input type="file" class="form-control" id="myfile1"
                       name="myfiles">
            </div>
            <label class="col-sm-2 control-label">文章链接(2)</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="url1" name="url">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">轮播图(3)</label>
            <div class="col-sm-3">
                <input type="file" class="form-control" id="myfile2"
                       name="myfiles">
            </div>
            <label class="col-sm-2 control-label">文章链接(3)</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="url2" name="url">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <button id="lunbosubmit" class="btn btn-primary btn-lg btn-block"><span
                        class="glyphicon glyphicon-send" aria-hidden="true"></span> 提交
                </button>
            </div>
        </div>


    </div>
</div>

<div class="navbar-fixed-bottom;">
    <p>
        <a>&copy;</a>
    </p>
</div>

<!--导入依赖的JQuery-->
<script src="js/jquery-1.9.1.min.js"></script>
<!--导入bootstrap的js文件-->
<script src="js/bootstrap.min.js"></script>
<!--导入ajax.form的js文件-->
<script src="js/jquery.form.min.js"></script>
<!--导入ajax.fileupload的js文件-->
<script src="js/ajaxfileupload.js"></script>
<script src="js/fileupload.js"></script>
</body>
</html>

使用简单的bootstrap+jquery。
记录下来，方便自己用

李文文丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax实现单文件上传+springmvc后台接收
m0_49528561的博客
10-31 478
配置要求和前后端要求 1. 配置要求 pom.xml文件中添加jar依赖： <!--文件上传--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> sp
SpringMVC中文件上传后表单其他属性为空
nipaijiong6257的博客
10-20 1323
SpringMVC中文件上传，添加enctype=”multipart/form-data”后表单其他属性为空问题 最近在开发一个银行的管理系统，用的是SpringMVC+Spring+Mybatis框架，在表单中上传文件的时候出现了form提交数据后，后台接收不到文件为null的情况我的form表单如下所示： <form action="asset/projectApplySave.do
ajax方式提交文件到后台同时加其他参数
weixin_30951231的博客
12-25 291
struts2后台Action方法，直接用参数成员变量对象的属性接收即可 转载于:https://www.cnblogs.com/libin6505/p/10175678.html
javaWeb上传代码（普通上传和ajax后台上传）
02-28
使用Apache 的 Commons FileUpload 实现上传功能。代码中包含两种上传方式，普通上传和jquery后台上传。
springmvc+ajax带有文本域进行文件上传
08-12
springmvc+ajax带有文本域和文件域的表单，使用ajax进行文件上传，插件：ajaxfileupload.js
ajaxupload在spring mvc4.2中实现简单文件上传
02-15
在Spring MVC 4.2框架中实现AjaxUpload（异步文件上传）是一个常见的需求，它允许用户在不刷新整个页面的情况下进行文件上传，提供更好的用户体验。以下是对这一主题的详细阐述： 1. **AjaxUpload简介**： Ajax...
Spring Mvc下实现以文件流方式下载文件的方法示例
08-26
本文主要介绍了 Spring Mvc 下实现以文件流方式下载文件的方法示例，该示例主要解决了在项目中需要对一个点击事件进行下载操作的需求。下面将详细介绍该方法的实现过程。 实现思路 在该示例中，我们首先需要在jsp...
spring MVC + bootstrap实现文件上传示例（带进度条）
08-31
在本文中，我们将深入探讨如何使用Spring MVC和Bootstrap框架实现一个具有进度条功能的文件上传示例。这个功能对于提供用户友好的Web应用至关重要，因为它可以让用户了解文件上传的进度，提升用户体验。 首先，我们...
ajax 文件上传应用简单实现
09-06
在Java中，你可以使用诸如Spring MVC的框架，配合`MultipartFile`类来处理上传的文件。一个简单的示例可能是这样的： ```java @PostMapping("/mbs/FileUpload") public ResponseEntity<String> handleFileUpload(@...
ajax iframe jsp 无刷新上传文件.zip
01-25
总结，"ajax iframe jsp 无刷新上传文件.zip"包含的知识点涵盖了Ajax与Iframe结合的文件上传技术，JSP服务器端处理，JavaScript字符串操作，Struts2的验证和链接标签，以及Spring入门和JSP请求Action的方法。...
Springboot+Poi实现Excel的导入导出
10-22
主要是springboot+myBatis+poi+mysql的使用，从数据库查询到结果集导出excel到本地，从本地中的excel文件导入到数据库中。
带参数的文件上传方法&后台接收
weixin_30809333的博客
05-15 462
1，html代码 利用input的multiple属性来上传多个文件，需要注意的是选择文件时，需要一次性选择多个文件，一次一次选择是达不到多文件上传的效果。 <script src="~/Scripts/jquery-3.1.1.min.js"></script> <link href="~/Content/Semantic-UI-CSS/semantic....
力扣 动态规划算法初步题目
移步换景的博客
09-27 403
一共有 n个商品，每个商品的金额分别是 H0, H1, …, Hn-1 子问题 f(k)表示前 k 个商品的最大消费。k个商品中最后一个商品是 Hk-1。如果不买这个商品，那么问题就变成前 k−1 个商品消费的最大金额，也就是子问题 f(k-1)。如果买这个商品，那么前一个商品 Hk−2 不能买，其他商品不受影响。问题变成前k−2 个商品消费的最大金额。两种情况中，选择金额较大的一种结果。 递推关系f(k)=max{f(k−1),Hk−1+f(k−2)} ...
SpringMVC Ajax上传文件实例
irokay的专栏
06-10 1万+
做了一个文件上传模块，因为传统的form提交会有页面刷新，不符合我的使用要求，所以我采用Ajax提交方式，这里说明下，我的应用程序前端为Ajax提交，后端SpringMVC接收处理。传统form提交文件方式：<form id="uploadPic" action="/user/saveHeaderPic" method="post" enctype="multipart/form-data">
springMVC使用ajax实现文件上传
HaHa_Sir的博客
01-25 4082
springMVC使用ajax实现文件上传 一、 上传之前的准备配置 1、 依赖jar包和 mvc.xml文件配置，参考连接： https://www.cnblogs.com/WJ-163/p/6269409.html 2、 两个jar包 a. commons-io-2.4.jar b. commons-fileupload-1.3.1.jar 3、一个 sp...
利用SpringMVC和Ajax实现文件上传功能
chengziaa123的博客
07-14 5819
个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能： 环境： 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步： 导入相关jar包： 第二步： 配置springmvc-config.xml &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;beans xmlns="http://www....
在上传文件的同时 传递参数 （ajax上传文件并传值给后台）
热门推荐
qq_15674631的博客
07-18 3万+
之前用的ajax方法上传文件，结果这边需要对上传文件进行分类和关键字处理， 话不多说直接上代码了 前端html以及js部分 <fieldset> <legend>文件信息</legend> <table class="table" style="width: 100%;"> <tr> ...
前端通过ajax同时上传文件和其它信息，SpringMVC后台接收
走马川行雪的博客
07-29 1437
1、前端写法 描述：通过前端上传一些注册信息，其中包括选择的文件信息。 代码： //标签写法 <input type="text" name="username" id="username" /> <input type="password" name="password" id="password" /> <input type="file" name="i...
物资管理系统设计：Spring、Ajax与MVC实现
"物资管理系统之物资管理模块的设计与实现，主要涵盖了物资管理、Spring框架、Ajax技术以及MVC设计模式的应用。" 这篇论文的主题是设计并实现一个物资管理系统中的物资管理模块，旨在解决学生会秘书处部门在物资...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值