后台：

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. iOS: 讯飞语音的使用

    一.介绍: 讯飞语音做的相当不错,容错率达到90%多,如果需要做语音方面的功能,它绝对是一个不错的选择.讯飞语音的功能很多:语音听写.语音识别.语音合成等,但我们最常用的还是语音听写.讯飞语音中包含界 ...

  2. kernel 模块与简单 hello 模块

    Kernel 模块与简单 hello 模块 kernel 模块的简介 Linux 内核进行扩展时,例如编写驱动程序.netfilter功能等,最方便的方式是通过编写模块,然后加载到内核中.由于 ker ...

  3. 无法定位程序输入点 crtis tailoredApp 于动态链接库MSVCR110.dll

    最近 在安装完   PHP开发,集成环境 WAMP  后,运行老是提示 “无法定位程序输入点 crtis tailoredApp 于动态链接库MSVCR110.dll”  网上百度,大多说是重新下载“ ...

  4. Silverlight打印注意事项

    1.Silverlight的打印功能从版本5开始才支持矢量打印,这不但要求打印机支持矢量打印,而且还要安装相应的打印驱动程序. 测试你的打印机是否支持矢量打印,可以参考:如何用C#代码检测打印机和驱动 ...

  5. swap文件

    # dd if=/dev/zero of=/tmp/myswap bs=1M count=4096 # mkswap /tmp/myswap # swapon /tmp/myswap # vim /e ...

  6. Ajax.ActionLink()方法的使用

    第一句话都会这么去写:程序猿就是苦逼,除了开发还要会写博文!哎,今天就和大家一起讨论下Ajax的辅助方法ActionLink的使用,如果有讲的不好的地方或错的地方,请大家务必扔板砖,要投准哦,砸死我算 ...

  7. 12c Grid Infrastructure Management Repository (GIMR)

    1.什么是管理资料库(Management Repository) 管理资料库是12c中oracle clusterware管理的一个单实例数据库.对应的数据库名是MGMTDB.因为是一个单实例数据库 ...

  8. C++Primer 第六章

    //1.我们通过调用运算符来执行函数.调用运算符的形式是一对圆括号,他作用于一个表达式,该表达式是一个函数或者指向函数的指针.圆括号之内是用逗号分隔的实参列表,用于初始化函数形参.调用表达式的类型就是 ...

  9. configs for postgresql restart and postgresql reload

    -- configs requiring postgresql restart select name, setting, context from pg_settings where context ...

  10. Lintcode: Recover Rotated Sorted Array

    Given a rotated sorted array, recover it to sorted array in-place. Example [4, 5, 1, 2, 3] -> [1, ...