ajax(form)图片上传（spring）

第一步：spring-web.xml

 <!--配置上传下载--><bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver" />

第二步：后台

@RequestMapping(value = "/bbbbb", method = RequestMethod.POST)public String imageshangchuan(@RequestPart("xxx") MultipartFile multipartFile, Model model, HttpServletRequest request) {if (!multipartFile.getContentType().contains("image/")) {model.addAttribute("err", "只能是图片文件！");return "/inputfile";}if (multipartFile.getSize() > 1024 * 1024 * 5) {model.addAttribute("err", "只能是5M以下！");return "/inputfile";}//取得相对路径String basePath = request.getServletContext().getRealPath("/img");String rekativePath;try {rekativePath = makeImagePath(basePath, multipartFile.getOriginalFilename());File file = new File(rekativePath);file.getParentFile().mkdir();multipartFile.transferTo(file);} catch (IOException e) {model.addAttribute("err", "上传失败，请重试");return "/inputfile";}return "/index";}public String makeImagePath (String basePath, String fileName){Date date = new Date();String[] filename = simpleFile(fileName);return String.format("%s%s%s%supload_%s_%s.%s",basePath,File.separator,new SimpleDateFormat("yyyyMMdd").format(date),File.separator,filename[0],new SimpleDateFormat("hhmmss").format(date),filename[1]);}public String[] simpleFile (String file){int sum = file.lastIndexOf(".");return new String[]{file.substring(0, sum),file.substring(sum + 1)};}

第三步：web.xml

<multipart-config><max-file-size>102400</max-file-size>
</multipart-config>

第四步：jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body><form:form action="/bbbbb" method="post" enctype="multipart/form-data"><div style="color: red">${err}</div><input type="file" name="xxx" /><input type="submit"/>
</form:form>
</body>
</html>

运行测试

使用ajax

js

  function asdsa() {var formData = new FormData();formData.append("xxx",document.getElementById("myfile").files[0]);$.ajax({url: '/bbbbb',type: 'POST',Accept: 'text/html;charset=UTF-8',cache: false,contentType:false,data:formData,processData: false,xhr: function () {myXhr = $.ajaxSettings.xhr();console.log(myXhr.upload);if (myXhr.upload) {myXhr.upload.addEventListener('progress', function (e) {console.log(e);var loaded = e.loaded;//已经上传大小情况var tot = e.total;//附件总大小var per = Math.floor(100 * loaded / tot);  //已经上传的百分比console.log('附件总大小 = ' + loaded);console.log('已经上传大小 = ' + tot);}, false);}return myXhr;}, success: function (data) {console.log(data);console.log("上传成功!!!!");}, error: function () {console.log("上传失败！");}});}

View Code

jsp

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/11/6Time: 20:00To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>$Title$</title>
</head>
<script src="css/jquery-1.11.3.js"></script>
<script>$(function () {$.get("login.html", {name: "John", time: "2pm"},function (data) {console.log(data);});})
</script>
<body>
<h1>测试</h1>
<button onclick="asdsa()">测试</button>
<meter id="p1" value="60" max="100">60%</meter>
<input id="myfile" type="file" multiple="multiple"/>
<progress id='progress' style='width:100px' value='0' max='100'>3/10</progress>
<audio controls="controls" src="mp3/白小白%20-%20最美情侣.mp3"/>
<img id="imd" src=""/><script>function asdsa() {var formData = new FormData();formData.append("xxx",document.getElementById("myfile").files[0]);$.ajax({url: '/bbbbb',type: 'POST',Accept: 'text/html;charset=UTF-8',cache: false,contentType:false,data:formData,processData: false,xhr: function () {myXhr = $.ajaxSettings.xhr();console.log(myXhr.upload);if (myXhr.upload) {myXhr.upload.addEventListener('progress', function (e) {console.log(e);var loaded = e.loaded;//已经上传大小情况var tot = e.total;//附件总大小var per = Math.floor(100 * loaded / tot);  //已经上传的百分比
                        console.log('附件总大小 = ' + loaded);console.log('已经上传大小 = ' + tot);}, false);}return myXhr;}, success: function (data) {console.log(data);console.log("上传成功!!!!");}, error: function () {console.log("上传失败！");}});}function da() {var files = document.getElementById("myfile").files[0];var read = new FileReader();read.readAsDataURL(files);read.onprogress = function (ev) {}read.onload = function (ev) {var c = document.getElementById("p1");c.value = 100;progress.value = 50;var c = document.getElementById("imd");c.src = ev.target.result;progress.value = 100;};}
</script>
</body>
</html>

View Code

项目地址：https://github.com/weibanggang/Picture

posted @ 2018-11-02 16:33 韦邦杠 阅读(...) 评论(...) 编辑 收藏

ajax(form)图片上传（spring）相关推荐

  1. ajax上传图片并显示,Ajax实现图片上传并预览

    效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

  2. html ajax 图片上传,Ajax实现图片上传并预览功能

    先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...

  3. php用ajaxs上传图片_jquery+ajax+php 图片上传

    最近在写"网上商城"的课程设计,用到了图片上传. 我要实现的功能主要有:(1)能够上传多张图片,不过当然是有限制的,最多5张:(2)能够进行图片预览:(3)能够删除图片:(4)服务 ...

  4. ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码

    这是数月前的事情了,场景是这样的: 在进行图片上传的时,我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的. 而且未建立统一上传函数.于是将代码改造了.心想来个a ...

  5. formidable ajax上传,nodejs+express+ajax实现图片上传及显示

    图片上传: 页面aja中比需抖接朋功要朋插x写法 var data = new FormData(); var files = $("#idFile")[0].files; if( ...

  6. Ajax实现图片上传并预览

    效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

  7. ajax js图片上传到php,Ajax上传并预览图片（附代码）

    这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 图片上 ...

  8. php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件

    注:本地预览无效,需要在服务断运行 使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...

  9. h5 ajax php 图片上传,图片上传生成海报H5技术详解

    我想很多经常做H5同学都会遇到过让用户上传照片的这种需求,那我这里给大家分享一些我常用的一些方法~废话不多时候,下面可以写一些干货,如果有更好的方法欢迎留言讨论! 首先,需要准备一些需要用到的东西. ...

  10. c ajax 上传图片插件,ajax实现图片上传和预览

    图片上传功能 html结构: ![](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能,在其属性中也包含一个accept='':可以限制文件 ...

最新文章

  1. VMware虚拟机安装之后，打开时找不到启动Centos的界面
  2. vc 基于对话框实现工具条提示显示
  3. tensorflow随笔 -QueueRunner
  4. mysql md5函数加密
  5. 《精通javascript》5，6章复习（三）
  6. nullnullanimate用法
  7. brew mysql 无法启动_MAC OSX brew 升级 mysql5.6到5.7无法启动的问题
  8. apache camel_REST与Apache Camel
  9. /proc 虚拟文件系统(实例)
  10. linux命令之ln 命令
  11. 首个面向手绘草图的深度自监督表示学习
  12. 「深度解读」为什么连Google也无法阻挡垂直行业SaaS的浪潮
  13. mysql执行ref_MySql执行分析
  14. vsftp 使用虚拟用户
  15. lol韩服游戏内设置_LOL手游：灵药战队有多强？辅助国际服第六，AD堪比UZI
  16. sublime text 2/3 快捷键汇总
  17. linux安装pl脚本,nagios插件脚本check_linux_stats.pl 安装
  18. 《完全写作指南》读书笔记
  19. Preparing Your Data for Use with robot_localization 准备 robot_localization 数据
  20. 基于Cohesie单元的二维水力压裂

热门文章

  1. Python程序的采样分析神器py-spy模块实践
  2. 20170917软件工程师在线笔试之员工幸福感问题
  3. Java常量不能二次赋值与常量不能修改值意思一样吗？
  4. vba commondialog控件添加不上_MyVBA加载宏——添加自定义菜单03——功能分析
  5. 阿里云 linux centos nginx安装IP ssl https证书
  6. Hyperledger Fabric blockchain explorer 重启
  7. 新浪SAE sae_debug保存日志
  8. JDBC学习（五、预编译语句对象）
  9. ubuntu 20 kvm 安装macos
  10. Spring Session + Redis 实现 Session 共享，附带 Nginx 集群