Java使用Ajax异步上传文件
更新时间:2021年5月25日 15:00 点击:1944
相关代码示例:
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上传文件的资料请关注猪先飞其它相关文章!
上一篇: centos 安装java环境的多种方法
下一篇: java基础之包装类的介绍及使用
相关文章
- 这篇文章主要介绍了如何利用java语言实现经典《复杂迷宫》游戏,文中采用了swing技术进行了界面化处理,感兴趣的小伙伴可以动手试一试...2022-02-01
java 运行报错has been compiled by a more recent version of the Java Runtime
java 运行报错has been compiled by a more recent version of the Java Runtime (class file version 54.0)...2021-04-01- 这篇文章主要介绍了在java中获取List集合中最大的日期时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
- 这篇文章主要介绍了教你怎么用Java获取国家法定节假日,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-23
- 这篇文章主要介绍了Java如何发起http请求的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-31
- 说起C#和Java这两门语言(语法,数据类型 等),个人以为,大概有90%以上的相似,甚至可以认为几乎一样。但是在工作中,我也发现了一些细微的差别...2020-06-25
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 这篇文章主要介绍了解决Java处理HTTP请求超时的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 这篇文章主要介绍了java 判断两个时间段是否重叠的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- 这篇文章主要介绍了超简洁java实现双色球若干注随机号码生成(实例代码),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-02
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
java 画pdf用itext调整表格宽度、自定义各个列宽的方法
这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31- 这篇文章主要介绍了Java生成随机姓名、性别和年龄的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-01
- 这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
Java使用ScriptEngine动态执行代码(附Java几种动态执行代码比较)
这篇文章主要介绍了Java使用ScriptEngine动态执行代码,并且分享Java几种动态执行代码比较,需要的朋友可以参考下...2021-04-15- 这篇文章主要介绍了Java开发实现人机猜拳游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-03
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25