后台：

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. linux shell 输入密码不显示

    1 read -s -p "YOUR PassWord:" pa echo "${pa}" 2 [liujianzuo@ow2 mysql_scri]$ cat ...

  2. 源码维护基本命令diff_patch

    源码维护基本命令 diff------生成源代码补丁diff [命令行选项] 源文件 新文件-r 递归处理相应目录-N 包含新文件到patch-u 输出统一格式(unified format),这种格 ...

  3. Vue.2.0.5-深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...

  4. jquery .on的使用

    1.7版本以上,开始使用.on绑定时间 给jquery动态产生的元素绑定事件不能使用普通的$("#fff").click(function(){alert("ok&quo ...

  5. kfed (kernel file editor：内核文件编辑器)

    kfed是没有在文档中标出的asm工具,在oracle 11gR1中被引入.可以被用来读写asm元数据,特别是磁盘头和asm元数据的内容. kfed是一个单独的工具,不依赖与asm实例,所以可以对mo ...

  6. !! 浅谈Java学习方法和后期面试技巧

    浅谈Java学习方法和后期面试技巧 昨天查看3303回复33 部落用户大酋长 下面简单列举一下大家学习java的一个系统知识点的一些介绍 一.java基础部分:java基础的时候,有些知识点是非常重要 ...

  7. cookie 使用笔记

    参考书<JSP Web 开发案例教程> index.jsp页面 dologin.jsp页面 welcome.jsp页面 页面显示 点击提交

  8. 构造器Constructor是否可被override?

    构造器Constructor是否可被override? 构造器Constructor不能被继承,因此不能重写Overriding,但可以被重载Overloading.

  9. 使用console进行 性能测试 和 计算代码运行时间(转载)

    本文转载自: 使用console进行 性能测试 和 计算代码运行时间

  10. paper 12：机器学习常见算法分类汇总

    机器学习无疑是当前数据分析领域的一个热点内容.很多人在平时的工作中都或多或少会用到机器学习的算法.这里南君先生为您总结一下常见的机器学习算法,以供您在工作和学习中参考. 机器学习的算法很多.很多时候困 ...