FormData对象实现文件Ajax上传
后台：
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; /**
*
* @Description :文件上传
* @version : 1.0
* @Date : 2016年4月28日 下午1:17:53
*/
@Controller
@RequestMapping("/upload")
public class UploadController extends BaseController {
private static final Logger log = LoggerFactory.getLogger(UploadController.class);
@RequestMapping("/index")
public String index() {
return "upload/upload";
} /**
* 上传
*
* @param files
* @param request
* @param response
* @return
*/
@RequestMapping("/files")
public @ResponseBody String file(@RequestParam MultipartFile[] files, HttpServletRequest request,
HttpServletResponse response, String path) {
String url = "";
try {
//
for (MultipartFile file : files) {
// 此处编写业务代码处理，组合url }
System.out.println("上传文件路径：" + url);
return url.substring(0, url.length() - 1);
} catch (Exception e) {
e.printStackTrace();
log.error(e.getMessage(), e);
}
return url;
}
}
页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>上传文件</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript"
src="<%=path%>/resources/js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("#upload").click(function() {
//FormData支持文件ajax上传
//使用 jQuery 来发送 FormData，但必须要正确的设置相关选项：
//processData: false, // 告诉jQuery不要去处理发送的数据
//contentType: false // 告诉jQuery不要去设置Content-Type请求头
//支持浏览器：Chrome 7+, Firefox(2.0) 4.0, Internet Explorer 10+, Opera 12+,Safari 5+
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url : "<%=path%>/upload/files.html",
data : formData,
type : "post",
dataType : "text",
timeout : 3600000,
async : true,
cache : false,
contentType : false,
processData : false,
success : function(data) {
if (data == "") {
alert("上传文件失败！");
} else {
$("#url").text(data);
}
},
error : function(data) {
alert(data);
}
});
}); });
</script> </head> <body>
<center>
<form id="uploadForm" enctype="multipart/form-data" method="post">
选择文件：<input type="file" name="files" multiple="multiple"><br />
<br /> <input type="button" value="上传" id="upload">
</form>
上传成功文件路径：<label id="url" />
</center>
</body>
</html>
FormData对象实现文件Ajax上传的更多相关文章
- models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...
- fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传
前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...
- 利用html5的FormData对象实现多图上传
<html> <head> <title>FormData多图上传演示</title> </head> <body> <a ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
- 玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传
var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- Jquery FormData文件异步上传 快速指南
网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...
- django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件
一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...
- 在jquery中，使用ajax上传文件和文本
function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...
随机推荐
- nginx源码分析—内存池结构ngx_pool_t及内存管理
Content 0. 序 1. 内存池结构 1.1 ngx_pool_t结构 1.2 其他相关结构 1.3 ngx_pool_t的逻辑结构 2. 内存池操作 2.1 创建内存池 2.2 销毁内存池 2 ...
- git的简单使用
Git-csm.com 安装git http://www.git-scm.com/download [liujianzuo@mylab ~]$ yum install git 已加载插件:faste ...
- Java foreach
foreach循环也叫增强型的for循环,或者叫foreach循环. foreach循环是JDK5.0的新特性(其他新特性比如泛型.自动装箱等). import java.util.Arrays; p ...
- 单臂路由+DHCP+VLAN
使用思科模拟软件Cisco Packet Tracer Student,软件功能有限,只能架设简单的网络架构,适合初学者使用.
- hbase基本操作
public class Demo { private Configuration conf; private Connection conn; @Before public void prepare ...
- 手动内存管理与ARC互相转换问题2
- mysql高负载的问题排查
http://dngood.blog.51cto.com/446195/1150031 log_slow_queries = /usr/local/mysql/var/slow_queries.log ...
- ASP.NET MVC Template
http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html http://st ...
- Java常用锁机制简介
在开发Java多线程应用程序中,各个线程之间由于要共享资源,必须用到锁机制.Java提供了多种多线程锁机制的实现方式,常见的有synchronized.ReentrantLock.Semaphore. ...
- Android中的Handler机制
直接在UI线程中开启子线程来更新TextView显示的内容,运行程序我们会发现,如下错 误:android.view.ViewRoot$CalledFromWrongThreadException: ...