后台：

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上传的更多相关文章

  1. models渲染字典&form表单上传文件&ajax上传文件

    {# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

  2. fromdata上传文件,ajax上传文件, 纯js上传文件,html5文件异步上传

    前端代码: 上传附件(如支付凭证等) <input type="file" name="fileUpload" id="fileUpload&q ...

  3. 利用html5的FormData对象实现多图上传

    <html> <head> <title>FormData多图上传演示</title> </head> <body> <a ...

  4. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  5. 玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

    var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...

  6. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  7. Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...

  8. django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件

    一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...

  9. 在jquery中，使用ajax上传文件和文本

    function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...

随机推荐

  1. Ball Tracking with OpenCV

    http://www.pyimagesearch.com/2015/09/14/ball-tracking-with-opencv/

  2. perl常见符号

    =>  键值对,左键右值 -> 引用,相当于java中的 [对象.方法名]中的点号 :: 表示调用类的一个方法 % 散列的标志,定义一个键值对类型的 @ 数组的标志 $ 标量的标志 =~ ...

  3. 四元数（Quaternion）和旋转（转）

    http://blog.csdn.net/candycat1992/article/details/41254799 四元数介绍 旋转,应该是三种坐标变换--缩放.旋转和平移,中最复杂的一种了.大家应 ...

  4. Android HttpClient基本使用方法

    GET 方式 //先将参数放入List,再对参数进行URL编码 List<BasicNameValuePair> params = new LinkedList<BasicNameV ...

  5. MVC项目实践,在三层架构下实现SportsStore-06,实现购物车

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  6. 第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  7. linix container & cgroup note

    1,Containers can run instructions native to the core CPU without any special interpretation mechanis ...

  8. Make Rules

    target: components ls TAB rule main:main.o mytool1.o mytool2.o gcc -o main main.o mytool1.o mytool2. ...

  9. WebService之Axis2 后续(6)~(10)目录

    WebService大讲堂之Axis2(6):跨服务会话(Session)管理 WebService大讲堂之Axis2(7):将Spring的装配JavaBean发布成WebService WebSe ...

  10. Leetcode: Count Numbers with Unique Digits

    Given a non-negative integer n, count all numbers with unique digits, x, where 0 ≤ x < 10n. Examp ...