Java使用Ajax异步上传文件

相关代码示例:

html代码片段:

                   <form class="layui-form" action="#" id="uploadForm">
	<div class="layui-form-item">
		<label class="layui-form-label">名称</label>
		<div class="layui-input-block">
			<input type="text" id="config_name" placeholder="请输入配置名称" autocomplete="off"
				class="layui-input">
		</div>
	</div>

	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">描述</label>
		<div class="layui-input-block">
			<textarea id="config_desc" placeholder="请输入配置描述" class="layui-textarea"></textarea>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">文件</label>
		<div class="layui-input-block">
			<input type="file" name="file">
			<p class="help-block">请选择配置文件</p>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" id="save_config_file">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>

</form>

js代码片段:

//上传配置文件
$("#save_config_file").click(function () {

	var name = $("#config_name").val();
	var desc = $("#config_desc").val();
	var userId = $("#userId").val();

	var formData = new FormData($("#uploadForm")[0]);

	formData.append("name",name);
	formData.append("desc",desc);
	formData.append("userId",userId);

		$.ajax({
			url: 'http://localhost:8090/bfi-web/api/ide/settings/uploadFiles',
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function (returndata) {

				layui.use('layer', function () {
					var layer = layui.layer;

					layer.msg(returndata.returnMsg, {
						icon: 1
					});
				});

				setTimeout(() => {

					closeLayui();

				}, 300);

			},
			error: function (returndata) {
				console.log("====================Error==========================");
			}
		});

});

Java代码片段(这里是SpringMVC+腾讯云对象存储,可将其更换为其它对象存储,如七牛云、ftp或者是其它对象存储):

   /**
    * 上传文件
    * @param request
    * @param file
    * @return
    */
@PostMapping(value="/uploadFiles",produces="application/json;charset=utf-8")
public JSONObject upModify(HttpServletRequest request, MultipartFile file) {

	JSONObject json = new JSONObject();

	try {

		COSClientUtil cosClientUtil = new COSClientUtil(); 

		if(!file.isEmpty()) {

			String name = cosClientUtil.uploadFile2Cos(file);
               String desc = request.getParameter("desc");
               String names = request.getParameter("name");
               String userId = request.getParameter("userId");

               logger.info("desc:"+desc);
               logger.info("names:"+names);
               logger.info("userId:"+userId);

			//图片名称
			logger.info("name = " + name);

			//上传到腾讯云
			String imgUrl = cosClientUtil.getImgUrl(name); 

			logger.info("imgUrl = " + imgUrl);

			//数据库保存图片地址
			String dbImgUrl = imgUrl.substring(0,imgUrl.indexOf("?"));
			logger.info("dbImgUrl = " + dbImgUrl);

			IdeSettings ide = new IdeSettings();
			ide.setName(names);
			ide.setContent(dbImgUrl);
			ide.setUserId(userId);
			ide.setUpdateTime(DateUtil.date().toString());
			ide.setUploadTime(DateUtil.date().toString());
			ide.setDescription(desc);

			boolean isAddConfig = ideSettingsService.insert(ide);

			logger.info(isAddConfig);

			if(isAddConfig) {
				json.put(CommonEnum.RETURN_CODE, "000000");
				json.put(CommonEnum.RETURN_MSG, "上传成功");
			}else {
				json.put(CommonEnum.RETURN_CODE, "222222");
				json.put(CommonEnum.RETURN_MSG, "上传失败");
			}

		}else {
			json.put(CommonEnum.RETURN_CODE, "111111");
			json.put(CommonEnum.RETURN_MSG, "参数异常");
		}

	} catch (Exception e) {
		e.printStackTrace();

		json.put(CommonEnum.RETURN_CODE, "333333");
		json.put(CommonEnum.RETURN_MSG, "特殊异常");

	}

       return json;
}

另一种示例:

1.jsp

$("#cxsc").click(function(){
                var bankId = $("#bankId").val();
                var formdata = new FormData();
                formdata.append('logo', $('#btnFile').get(0).files[0]);
                formdata.append('bankId', bankId);
                $.ajax({
                    type: 'POST',
                    url: './uploadLogo',
                    contentType : false,
                    data : formdata,
                    processData : false,
                    dataType: "json",
                    success: function (data) {
                        $("#logoImg").attr('src','${_b}/upload/banklogo/'+data.msg);
                    },
                    error : function(data) {
                        alert('上传失败!');
                    }
                });
 
<#if formData?exists>
                            <#if (formData.logoImg??)>
                                <img src="${_b}/upload/banklogo/${formData.logoImg}" style="width:120px;height:120px;margin-bottom:5px;" id="logoImg"/>
                                <br/>
                                <input type="file" name="logo" id="btnFile" style="border:none;display:inline">
                                <button type="button" id="cxsc" style="display:inline">上传</button>
                            <#else>
                                <input type="file" name="logo" style="border:none">
                            </#if>
                        <#else>
                            <input type="file" name="logo" style="border:none">
                        </#if>

2.controller

@RequestMapping(value = "/uploadLogo", method = {RequestMethod.POST})
    public void uploadLogo(
        @RequestParam(value = "bankId", required = true) String bankId,
        @RequestParam("logo") MultipartFile logo,
        HttpServletRequest request, HttpServletResponse response, ModelMap model) {
        Json json = new Json();
        BankManage bankManage = bankManageService.getById(bankId);
        if (bankManage != null) {
            try {
                if (!logo.isEmpty()) {
                    String relativePath = "/upload/banklogo";
                    // 旧图片路径
                    String absolutePath = request.getSession().getServletContext().getRealPath(relativePath)+"\\"+bankManage.getLogoImg();
                    File oldfile = new File(absolutePath);
                    if (oldfile.exists()) {
                        oldfile.delete(); // 删除旧图片
                    }
                    String newPath = request.getSession().getServletContext().getRealPath(relativePath)+"\\"+logo.getOriginalFilename();
                    File newFile = new File(newPath);
                    logo.transferTo(newFile);
                    bankManage.setLogoImg(logo.getOriginalFilename());
                    bankManageService.update(bankManage);
                    json.setMsg(logo.getOriginalFilename());
                    writeJson(request, response, json);
                }else {
                    json.setMsg("上传失败!");
                    writeJson(request, response, json);
                }
            }catch (Exception e) {
                e.printStackTrace();
                logger.error(e);
            }
        }
    }

以上就是Java使用Ajax异步上传文件的详细内容,更多关于Java 用Ajax上传文件的资料请关注我们其它相关文章!

(0)

相关推荐

  • Java后台判断ajax请求及处理过程详解

    一.问题描述: 当访问一个需要登录的页面时,会有过滤器或者拦截器进行过滤拦截,如果用户没有登录,则跳转到登录页面. 当用户已经登录进入系统后,然后长时间没操作,等到session过期后,再点击一个ajax请求操作时,这时再跳转到登录页面就不合适了,因为这是ajax操作,拦截后跳到页面返回的结果js识别不了. 二.解决方法: 在过滤器或者拦截器上做识别,针对页面跳转请求和ajax请求分别处理. 页面跳转的不再详说,现在说的是ajax请求. 直接贴代码: import java.io.IOExcep

  • 原生JavaScrpit中异步请求Ajax实现方法

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需要ajax功能而引入Jquery比较不划算. 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题. JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpReq

  • AJAX实现数据的增删改查操作详解【java后台】

    本文实例讲述了AJAX实现数据的增删改查操作.分享给大家供大家参考,具体如下: 主页:index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></sc

  • Java使用Ajax实现跨域上传图片功能

    说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和jQuery.form.js <script type="text/JavaScript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.form.js"></scri

  • java模拟ajax访问另一个项目的controller代码实例

    不同项目,如何java模拟ajax访问另一个项目的controller 直接上码 package com.ultrapower.zq.iscloud.web.boc.api.utils; /** * create by liujie */ import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import ja

  • React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

  • jQuery的Ajax接收java返回数据方法

    1.前端Ajax请求如下: $.ajax({ type : "post", //async:false, url : PATH + "/product/selectPicture.action", dataType : "json", success : function(data) { $.each(data,function(k,v){ alert(k +":"+ v); }); } }); 2 其中PATH在jsp页面中

  • AJAX+JAVA用户登陆注册验证的实现代码

    需求 通过ajax异步刷新页面验证用户输入的账号密码是否在数据库中存在. 技术栈 JSP+Servlet+Oracle 具体代码 JSP部分: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit

  • Java+Ajax实现的用户名重复检验功能实例详解

    本文实例讲述了Java+Ajax实现的用户名重复检验功能.分享给大家供大家参考,具体如下: 今天,我来教大家怎么实现Java+Ajax实现用户名重复检验. 实体类代码: /** * */ package com.hqj.dao; /** * @author HuangQinJian 下午9:12:19 2017年4月23日 */ public class User { private int id; private String name; private String password; /*

  • 使用jquery 的ajax 与 Java servlet的交互代码实例

    这篇文章主要介绍了使用jquery 的ajax 与 Java servlet的交互代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 由于是使用jquery的 所以别忘记导入jq 下面是jsp文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!

  • Javaweb使用cors完成跨域ajax数据交互

    跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. cors 全称:Cross-Origin Resource Sharing 中文意思:跨域资源共享 它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而

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

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

随机推荐