后台：

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. 人脸识别的ppt

    http://wenku.baidu.com/link?url=GWiNRy_9mzqBZ9_2DDZbHRZbBbaBofhs1Y0pBS7aiE5oab8TY78r_z6aAlqo_L9AZzD4 ...

  2. hibernate一对多注解

    package net.zmcheng.model; import java.util.HashSet;import java.util.Set; import javax.persistence.C ...

  3. [BS-24] UIImageView的contentMode属性

    UIImageView的contentMode属性   所有的UIView都有个contentMode属性,UIImageView继承自UIView,我们在使用UIImageView时,经常要考虑这些 ...

  4. sql拼接字符串和转换类型

    select top 10 a.ID as a_ID,a.Name as a_Name,c.* from (select * from DC_Trees where Pid=187 or ID=187 ...

  5. memwatch内存泄露检测工具

    工具介绍 官网 http://www.linkdata.se/sourcecode/memwatch/ 其功能如下官网介绍,挑选重点整理: 1. 号称功能: 内存泄露检测 (检测未释放内存, 即 动态 ...

  6. python入门到精通[一]:搭建开发环境

    摘要:Python认识,及在windows和linux上安装环境,测试是否安装成功. 1.写在前面 参加工作也有5年多了,一直在做.net开发,近一年有做NodeJS开发.从一开始的不习惯,到逐步适应 ...

  7. postgres-toolkit (A Victorinox for PostgreSQL DBA )

    postgres-toolkit A collection of scripts and utilities to manage PostgreSQL servers. Allows DBA to p ...

  8. Maven教程(转载)

    转载自:http://www.yiibai.com/maven/ Apache Maven是一个软件项目管理和综合工具.基于项目对象模型(POM)的概念,Maven可以从一个中心资料片管理项目构建,报 ...

  9. 转：python webdriver API 之浏览器的操作

    1.1.浏览器最大化在统一的浏览器大小下运行用例,可以比较容易的跟一些基于图像比对的工具进行结合,提升测试的灵活性及普遍适用性.比如可以跟 sikuli 结合,使用 sikuli 操作 flash.# ...

  10. [转] FastJson---高性能JSON开发包

    原文地址: FastJson---高性能JSON开发包 Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器,由阿里巴巴公司开发.1.遵循http://json.org标准,为 ...