java 使用Ajax异步上传文件

相关代码示例:

html代码片段:

名称

class="layui-input">

描述

</p><p> </p><p> </p><p> </p><p> <label class="layui-form-label">文件</label></p><p> </p><p> <input name="file" type="file"/></p><p> </p><p class="help-block">请选择配置文件</p><p> </p><p> </p><p> </p><p> </p><p> <button class="layui-btn" id="save_config_file">立即提交</button></p><p> <button class="layui-btn layui-btn-primary" type="reset">重置</button></p><p> </p><p> </p><p/><p><a target="_blank" href="https://www.finclip.com/news/tags-85.html" style="font-weight:bold;">js</a>代码片段:</p><p>//上传配置文件</p><p>$("#save_config_file").click(function () {</p><p> var name = $("#config_name").val();</p><p> var desc = $("#config_desc").val();</p><p> var userId = $("#userId").val();</p><p> var formData = new FormData($("#uploadForm")[0]);</p><p> formData.append("name",name);</p><p> formData.append("desc",desc);</p><p> formData.append("userId",userId);</p><p> $.ajax({</p><p> url: 'http://localhost:8090/bfi-web/api/ide/settings/uploadFiles',</p><p> type: 'POST',</p><p> data: formData,</p><p> async: false,</p><p> cache: false,</p><p> contentType: false,</p><p> processData: false,</p><p> success: function (returndata) {</p><p> layui.use('layer', function () {</p><p> var layer = layui.layer;</p><p> layer.msg(returndata.returnMsg, {</p><p> icon: 1</p><p> });</p><p> });</p><p> setTimeout(() => {</p><p> closeLayui();</p><p> }, 300);</p><p> },</p><p> error: function (returndata) {</p><p> console.log("====================Error==========================");</p><p> }</p><p> });</p><p>});</p><p>java代码片段(这里是SpringMVC+腾讯云对象存储,可将其更换为其它对象存储，如七牛云、ftp或者是其它对象存储):</p><p>/**</p><p> * 上传文件</p><p> * @param request</p><p> * @param file</p><p> * @return</p><p> */</p><p>@PostMapping(value="/uploadFiles",produces="application/json;charset=utf-8")</p><p>public JSONObject upModify(HttpServletRequest request, MultipartFile file) {</p><p> </p><p> JSONObject json = new JSONObject();</p><p> try {</p><p> </p><p> COSClientUtil cosClientUtil = new COSClientUtil(); </p><p> if(!file.isEmpty()) {</p><p> </p><p> String name = cosClientUtil.uploadFile2Cos(file); </p><p> String desc = request.getParameter("desc");</p><p> String names = request.getParameter("name");</p><p> String userId = request.getParameter("userId");</p><p> </p><p> logger.info("desc:"+desc);</p><p> logger.info("names:"+names);</p><p> logger.info("userId:"+userId);</p><p> </p><p> //图片名称</p><p> logger.info("name = " + name);</p><p> </p><p> //上传到腾讯云</p><p> String imgUrl = cosClientUtil.getImgUrl(name); </p><p> logger.info("imgUrl = " + imgUrl);</p><p> </p><p> //<a target="_blank" href="https://www.finclip.com/news/tags-389.html" style="font-weight:bold;">数据库</a>保存图片地址</p><p> String dbImgUrl = imgUrl.substring(0,imgUrl.indexOf("?"));</p><p> logger.info("dbImgUrl = " + dbImgUrl);</p><p> </p><p> IdeSettings ide = new IdeSettings();</p><p> ide.setName(names);</p><p> ide.setContent(dbImgUrl);</p><p> ide.setUserId(userId);</p><p> ide.setUpdateTime(DateUtil.date().toString());</p><p> ide.setUploadTime(DateUtil.date().toString());</p><p> ide.setDescription(desc);</p><p> </p><p> boolean isAddConfig = ideSettingsService.insert(ide);</p><p> </p><p> logger.info(isAddConfig);</p><p> </p><p> if(isAddConfig) {</p><p> json.put(CommonEnum.RETURN_CODE, "000000");</p><p> json.put(CommonEnum.RETURN_MSG, "上传成功");</p><p> }else {</p><p> json.put(CommonEnum.RETURN_CODE, "222222");</p><p> json.put(CommonEnum.RETURN_MSG, "上传失败");</p><p> }</p><p> </p><p> </p><p> </p><p> }else {</p><p> json.put(CommonEnum.RETURN_CODE, "111111");</p><p> json.put(CommonEnum.RETURN_MSG, "<a target="_blank" href="https://www.finclip.com/news/tags-672.html" style="font-weight:bold;">参数</a>异常");</p><p> }</p><p> </p><p> } catch (Exception e) {</p><p> e.printStackTrace();</p><p> json.put(CommonEnum.RETURN_CODE, "333333");</p><p> json.put(CommonEnum.RETURN_MSG, "特殊异常");</p><p> }</p><p> </p><p> return json;</p><p>}</p><p>另一种示例：</p><p>1.jsp</p><p>$("#cxsc").click(function(){</p><p>                var bankId = $("#bankId").val();</p><p>                var formdata = new FormData();</p><p>                formdata.append('logo', $('#btnFile').get(0).files[0]);</p><p>                formdata.append('bankId', bankId);</p><p>                $.ajax({</p><p>                    type: 'POST',</p><p>                    url: './uploadLogo',</p><p>                    contentType : false,</p><p>                    data : formdata,</p><p>                    processData : false,</p><p>                    dataType: "json",</p><p>                    success: function (data) {</p><p>                        $("#logoImg").attr('src','${_b}/upload/banklogo/'+data.msg);</p><p>                    },</p><p>                    error : function(data) {</p><p>                        alert('上传失败！');</p><p>                    }</p><p>                });</p><p> </p><p><#if formData?exists></p><p>                            <#if (formData.logoImg??)></p><p>                                <img id="logoImg" src="${_b}/upload/banklogo/${formData.logoImg}" style="width:120px;height:120px;margin-bottom:5px;"/></p><p>                                <br/></p><p>                                <input id="btnFile" name="logo" style="border:none;display:inline" type="file"/></p><p>                                <button id="cxsc" style="display:inline" type="button">上传</button></p><p>                            <#else></p><p>                                <input name="logo" style="border:none" type="file"/></p><p>                            #if></p><p>                        <#else></p><p>                            <input name="logo" style="border:none" type="file"/></p><p>                        #if></p><p>2.controller</p><p>@RequestMapping(value = "/uploadLogo", method = {RequestMethod.POST})</p><p>    public void uploadLogo(</p><p>        @RequestParam(value = "bankId", required = true) String bankId,</p><p>        @RequestParam("logo") MultipartFile logo,</p><p>        HttpServletRequest request, HttpServletResponse response, ModelMap model) {</p><p>        Json json = new Json();</p><p>        BankManage bankManage = bankManageService.getById(bankId);</p><p>        if (bankManage != null) {</p><p>            try {</p><p>                if (!logo.isEmpty()) {</p><p>                    String relativePath = "/upload/banklogo";</p><p>                    // 旧图片路径</p><p>                    String absolutePath = request.getSession().getServletContext().getRealPath(relativePath)+"\\"+bankManage.getLogoImg();</p><p>                    File oldfile = new File(absolutePath);</p><p>                    if (oldfile.exists()) {</p><p>                        oldfile.delete(); // 删除旧图片</p><p>                    }</p><p>                    String newPath = request.getSession().getServletContext().getRealPath(relativePath)+"\\"+logo.getOriginalFilename();</p><p>                    File newFile = new File(newPath);</p><p>                    logo.transferTo(newFile);</p><p>                    bankManage.setLogoImg(logo.getOriginalFilename());</p><p>                    bankManageService.update(bankManage);</p><p>                    json.setMsg(logo.getOriginalFilename());</p><p>                    writeJson(request, response, json);</p><p>                }else {</p><p>                    json.setMsg("上传失败！");</p><p>                    writeJson(request, response, json);</p><p>                }</p><p>            }catch (Exception e) {</p><p>                e.printStackTrace();</p><p>                logger.error(e);</p><p>            }</p><p>        }</p><p>    }</p><p>以上就是Java使用Ajax异步上传文件的详细内容，更多关于Java 用Ajax上传文件的资料请关注我们其它相关文章！</p></div> <div class="fr tag">标签：<a href="https://www.finclip.com/news/tags-92.html">使用</a> <div id="tuijianwenzhang" class="part clear 推荐文章"> <div class="top"> <h3 class="title">推荐文章</h3> </div> <div class="side tuijianwenzhang"><ul><ul class="hot_posts"> <li><h4><a href="https://www.finclip.com/news/f/9435.html" title="小程序SDK是什么意思？小程序sdk和插件有什么区别？">小程序SDK是什么意思？小程序sdk和插件有什么区别？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58967.html" title="小程序支付功能怎么实现？一篇详细教程来了！">小程序支付功能怎么实现？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58064.html" title="企业app开发（企业app开发定制外包）">企业app开发流程是什么？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/52142.html" title="app运营模式框架（app运营体系搭建）">app运营模式有哪些？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/21082.html" title="小程序成为多社交平台引流利器,小程序多端引流怎么做">小程序多端引流怎么做？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/48029.html" title="小程序生态分析（小程序经济环境分析）">小程序生态分析的机会和威胁</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/54499.html" title="flutter 小程序（flutter 小程序方案）">Flutter入门这一篇效率文章就够了</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/39393.html" title="原生与跨平台解决方案分析,跨平台软件开发技术方案">原生与跨平台解决方案分析,跨平台软件开发技术方案</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58899.html" title="热更新技术：让软件更新变得更加轻松快速">热更新技术：让软件更新变得更加轻松快速</a></h4></li></ul></ul></div> </div> <div id="divPrevious" class="part clear previous"> <div class="top"> <h3 class="title">最近发表</h3> </div> <div class="side divPrevious"><ul><li><a title="制作开发小程序 - 创造你的自由数字世界" href="https://www.finclip.com/news/f/65657.html">制作开发小程序 - 创造你的自由数字世界</a></li> <li><a title="信科和信创区别是什么 - 完全解析与比较" href="https://www.finclip.com/news/f/65656.html">信科和信创区别是什么 - 完全解析与比较</a></li> <li><a title="小程序直播系统开发 - 打造属于你的在线直播平台" href="https://www.finclip.com/news/f/65655.html">小程序直播系统开发 - 打造属于你的在线直播平台</a></li> <li><a title="专业小程序开发 - 为您的业务提供强大的移动解决方案" href="https://www.finclip.com/news/f/65654.html">专业小程序开发 - 为您的业务提供强大的移动解决方案</a></li> <li><a title="信创咨询规划是什么" href="https://www.finclip.com/news/f/65653.html">信创咨询规划是什么</a></li> <li><a title="小程序开发规则：打造你的个人品牌的秘诀是什么？" href="https://www.finclip.com/news/f/65652.html">小程序开发规则：打造你的个人品牌的秘诀是什么？</a></li> <li><a title="小程序网站开发：让你的业务更上一层楼" href="https://www.finclip.com/news/f/65651.html">小程序网站开发：让你的业务更上一层楼</a></li> <li><a title="做信创需要的资质是什么？" href="https://www.finclip.com/news/f/65650.html">做信创需要的资质是什么？</a></li> <li><a title="小程序开发者管理——实现成功小程序的关键" href="https://www.finclip.com/news/f/65649.html">小程序开发者管理——实现成功小程序的关键</a></li> <li><a title="应用小程序开发 - 实现业务创新和用户增长的新途径" href="https://www.finclip.com/news/f/65648.html">应用小程序开发 - 实现业务创新和用户增长的新途径</a></li> </ul></div> </div> <div id="hot_posts" class="part clear hot_posts"> <div class="top"> <h3 class="title">热评文章</h3> </div> <ul class="hot_posts"><li><h4><a href="https://www.finclip.com/news/f/26692.html" title="小程序生态是什么？为什么数字钱包需要引入小程序生态？">小程序生态是什么？为什么数字钱包需要引入小程序生态？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/2281.html" title="总结Android模块化的一些知识点。（android模块化框架）">总结Android模块化的一些知识点。（androi</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/653.html" title="JavaScript：世界上误解最深的语言（javascript是最好的语言）">JavaScript：世界上误解最深的语言（java</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/60967.html" title="详解在Spring MVC或Spring Boot中使用Filter打印请求参数问题">详解在Spring MVC或Spring Boot中</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/60736.html" title="Java飞行记录器JFR功能实现过程图解">Java飞行记录器JFR功能实现过程图解</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/54183.html" title="SpringBoot设置默认主页的方法步骤">SpringBoot设置默认主页的方法步骤</a></h4></li></ul> </div> <a href="http://www.finclip.com/?channel=jtseo" target="_blank"><img style="width:100%;height:100%" src="https://www.finclip.com/news/zb_users/upload/2022/11/%E4%B8%80%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%8C%E8%B7%A8%E7%AB%AF%E8%BF%90%E8%A1%8C-370_680.png"/></a><br/> </div>