后台：

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. 多大开始玩EV3

    机器人EV3还是初中生才能玩的溜 耐撕爸爸推荐年龄:初中及以上 推荐理由:无需使用计算机就可进行编程,培养孩子的编程.机械.电子.物理等综合能力. 在欧美等国家,乐高机器人融入教学已成为一种普遍现象, ...

  2. loop_nslookup

    function loop_nslookup() { $baseFolder = "D:\ps_toolkit" $ip_list = "$baseFolder\ip_l ...

  3. 电量显示Binding Converter MVVM

    用一个ProcessBar显示电量,低于20%时候,ForeGround为红色,否则为绿色, 页面使用了MVVM绑定到了ViewModel, ProcessBar XAML为 <Progress ...

  4. [PCL]NDT点云匹配方法

    测试NDT方法的Demo,http://pointclouds.org/documentation/tutorials/normal_distributions_transform.php#norma ...

  5. iOS SQLite 增删改查的封装（关系型）

    在工程里导入libsqlite3.tbd库(Xcode 7) #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder &l ...

  6. Winform禁止容器内控件获得焦点时改变容器显示范围坐标

    在Winform中当容器的可视高度无法显示所有控件并且容器的AutoScroll属性设置为True的情况下,但点击容器内某个未显示完整的控件时,会出现容器的滚动条自动下滚的情况. 这是由于控件获得焦点 ...

  7. web app 自适应 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  8. 生成arff文件，csv转为arff

    一.什么是arff格式文件 1.arff是Attribute-Relation File Format缩写,从英文字面也能大概看出什么意思.它是weka数据挖掘开源程序使用的一种文件模式.由于weka ...

  9. UISearchController的使用

    - (void)addSearchController { _searchController = [[UISearchController alloc] initWithSearchResultsC ...

  10. Java基础(39):数据的四舍五入、去整、产生随机数---Math类的应用

    使用 Math 类操作数据 Math 类位于 java.lang 包中,包含用于执行基本数学运算的方法, Math 类的所有方法都是静态方法,所以使用该类中的方法时,可以直接使用类名.方法名,如: M ...