前端代码:

<form id= "uploadForm">
<p >指定文件名: <input type="text" name="filename" value= ""/></p >
<p >上传文件: <input type="file" name="file"/></ p>
<input type="button" value="上传" onclick="doUpload()" />
</form> function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'http://localhost:8080/xiaochangwei/file/upload' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}

后端:

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model) {
System.out.println("开始");
String path = request.getSession().getServletContext().getRealPath("upload");
String fileName = file.getOriginalFilename();
// String fileName = new Date().getTime()+".jpg";
System.out.println(path);
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
} // 保存
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
model.addAttribute("fileUrl", request.getContextPath() + "/upload/" + fileName);
return "result";
}

如果前端有很多实体类数据同文件一同提交

可以修改后端方法为:

upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)

利用下面的代码更可实现带有进度条的文件上传

    <script type="text/javascript">

        function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var FileController = "http://localhost:8080/xiaochangwei/file/upload"; // 接收上传文件的后台地址 // FormData 对象
var form = new FormData($( "#uploadForm" )[0]); // XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
// alert("上传完成!");
}; xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
} function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
if(evt.loaded==evt.total){
alert("上传完成100%");
}
}
} </script> <br />
<br />
<br />
<br /> <progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span> <br />
<br />
<br />
<br />
<form id= "uploadForm">

    <input type="file" id="file" name="myfile" />
    <input type="button" onclick="UpladFile()" value="上传" />

</form>

springMVC+ajax 文件上传 带进度条的更多相关文章

  1. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  2. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  3. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  4. Struts2文件上传带进度条,虽然不是很完美

    好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...

  5. Springboot 文件上传(带进度条)

    1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  6. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  7. php实现大文件上传带进度条

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...

  8. struts2多文件上传(带进度条)demo+说明

    利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...

  9. html5 文件上传 带进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 斐讯k1路由器刷Breed BootLoader(不死UBoot)教程

    刷入Breed BootLoader: 因为这个K1路由器可以开启telnet服务,所以此处刷Breed可以不使用编程器刷Flash芯片的方法进行. 1.打开K1路由器的Telnet服务. 电脑通过有 ...

  2. Servlet中的请求转发和重定向

    跳转和重定向 有的时候客户端请求到达服务端后需要对请求重新转发到其它Servlet甚至别的服务器,这就需要跳转和重定向. 区别 一般来说,跳转是服务器内部跳转,例如将请求从一个Servlet转发给另外 ...

  3. 2.Modelsim打开时出现的Error

    Modelsim之error “unable to check out a viewer license necessary for use of the modelsim graph.Vsim is ...

  4. Session State Pattern会话状态模式

    Client Session State 客户会话状态. 在Client端保存会话状态. 运行机制 Client在每次请求时会把所有的会话数据传给Server,Server在响应时把所有的会话状态传给 ...

  5. Tkinter教程之Scrollbar篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811319 '''Tkinter教程之Scrollbar篇'''#Scrollbar(滚动条) ...

  6. Linux - /etc/passwd和/etc/shadow文件结构

    /etc/passwd文件结构 1.账号名称:         就是账号啦!用来对应 UID 的.例如 root 的 UID 对应就是 0 (第三字段):     2.口令:         早期 U ...

  7. 【转载】 C#往文件中追加文本内容信息

    在C#的文件相关操作中,往已有的文件中追加相关内容信息也是常有的操作,例如我们在写网站日志文件的时候,很多时候是1天的日志存放在一个txt文件中,此时就涉及到往原有文件中追加写入文本内容信息,追加文本 ...

  8. Python下HttpHTTPClient和AsyncHTTPClient

    HTTPClient 使用例子: from tornado.httpclient import HTTPClient def synchronous_fetch(url): http_client = ...

  9. GMap.net控件学习记录

    主要参考网址 http://www.cnblogs.com/luxiaoxun/p/3802559.html http://www.cnblogs.com/luxiaoxun/p/3463250.ht ...

  10. 哈尔滨理工大学软件与微电子学院第八届程序设计竞赛同步赛(高年级) Solution

    A: Solved. 分别处理出每个%7后余数的数字个数,再组合一下 #include <bits/stdc++.h> using namespace std; #define ll lo ...