一、简介

　　ajaxFileUpload是一种异步的文件上传控件，通过ajax进行文件上传，并获取上传处理结果。在很多时候我们需要使用到文件上传的功能，但是不需要使用那些强大的上传插件。此时就可以使用ajaxFileUpload。它基于jquery，本质是使用iframe完成上传。下载地址为：下载 。

二、实例　　

　　网页代码如下：

 <%@ page contentType="text/html; charset=UTF-8"%>

 <!DOCTYPE html>

 <html>

 <head>

 <title>文件上传</title>

 </head>

 <body>

   <div>

         <form id="formItem">

             <div id="contentTable" style="border:0px;">

                 <h1 class="title" style="font-size:15px;border-bottom:1pxsolid#DFE3E6;">excel文件上传</h1>

                 <table width="80%">

                 <tr>

                     <td width="30%" align="right">

                     选择要上传的excel文件

                     </td>

                     <td width="70%" style="text-align:center;">

                     <input type="file" id="file1" name="file"/>

                     </td>

                 </tr>

                 </table>

                 <div>

                     <input type="button" value="导入&nbsp;"/>

                 </div>

             </div>

         </form>

   </div>

 <scriptsrc="${pageContext.request.contextPath}/res/js/jquery-1.9.1.min.js"type="text/javascript"></script>

 <scriptsrc="${pageContext.request.contextPath}/res/js/ajaxfileupload.js"></script>

 <scripttype="text/javascript">

 var flag=false;

 $(function(){

   //文件类型过滤

   $(":button").click(function(){

       varfilepath = $("#file1").val();

       vararr = new Array();

       arr = filepath.split(".");

       var fileType = new Array(["xls"],["xlsx"]);

       for(var i = 0; i < fileType.length; i++){

           if(arr[1] == fileType[i]){

               flag = true;

           }

       }

       if(flag){

           ajaxFileUpload();

       }else{

           alert("请选择excel文件上传")

           return false;

       }

   })

 });

 functionajaxFileUpload(){

   $.ajaxFileUpload

   (

     {

       url : '${pageContext.request.contextPath}/file/upload.action',//用于文件上传的服务器端请求地址

       secureuri : false,//一般设置为false

       fileElementId : 'file1',//文件上传空间的id属性

       dataType : 'json',//返回值类型一般设置为json

       success : function(data,status)//服务器成功响应处理函数

       {

           if(data){

               alert("上传成功！");

               $("#file1").val("");

           }

         flag = false;

       },

       error : function(data,status,e)//服务器响应失败处理函数

       {

         alert(e);

       }

     }

   )

   return false;

 }

 </script>

 </body>

 </html>

　　服务器端代码如下：

    /**

    *使用springmvc进行文件上传处理

    */

    @RequestMapping("upload")

    @ResponseBody

    public boolean upload(HttpServletRequest request, HttpServletResponse response ) throws UnsupportedEncodingException

    {

        String path = request.getSession().getServletContext().getRealPath("");

        Calendar calendar = Calendar.getInstance();

        calendar.setTime(new Date());

        request.setCharacterEncoding("UTF-8");

        path = String.format("%s\\%s\\%s\\%s\\%s\\%s", path, "file", "upload", calendar.get(calendar.YEAR),

                calendar.get(calendar.MONTH), calendar.get(calendar.DAY_OF_MONTH));

        File filepath = new File(path);

        if (!filepath.exists()) {

            filepath.mkdirs();

        }

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        // 获得文件

        MultipartFile multipartFile = multipartRequest.getFile("file");

        String filename = multipartFile.getOriginalFilename();

        OutputStream os = null;

        InputStream is = null;

        File uploadFile = null;

        try {

            is = multipartFile.getInputStream();

            if (is != null) {

                uploadFile = new File(filepath, System.currentTimeMillis() + ".xls");

                os = new FileOutputStream(uploadFile);

                IOUtils.copy(is, os);

                os.flush();

            }

        } catch (IOException e) {

            e.printStackTrace();

            return false;

        } finally {

            IOUtils.closeQuietly(os);

            IOUtils.closeQuietly(is);

        }

        return true;

    }

ajaxFileUpload文件上传的更多相关文章

  1. MVC+AjaxFileUpload文件上传

    来源:微信公众号CodeL 本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢? 原因是在此之前,我们尝试使用过很多基于flash ...

  2. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  3. spring mvc ajaxfileupload文件上传返回json下载问题

    问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/ad ...

  4. AjaxFileUpload文件上传组件(php+jQuery+ajax)

    jQuery插件AjaxFileUpload可以实现ajax文件上传,下载地址:http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupl ...

  5. ajaxFileUpload 文件上传

    源码: jQuery .extend({ createUploadIframe : function(id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //c ...

  6. JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...

  7. ajaxFileupload多文件上传

    最近有个功能模块需要上传图片,为了和之前的伙伴们保持一致我也使用了ajaxFileupload, 但是源码只支持单文件上传,所以百般斟酌之下决定修改源码,废话不多说直接上代码 HTML上传代码段: & ...

  8. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...

  9. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

随机推荐

  1. 四则运算APP（BUG发掘）

    BUG: 1.有几率会出现一样的题目. 2.题目会出现两个一样的答案. 3.做题结束后不能返回主界面或者重新开始. 感想: 1.题目应该按年级分类出题. 2.主界面可以添加更多功能 如自己输入题目数, ...

  2. SQL Server 多条记录的某个字段拼接

    USE [FM_Dev] GO /****** 对象: UserDefinedFunction [dbo].[GetClassNameByStudentCode] 脚本日期: 05/23/2014 1 ...

  3. 【C#】OOP之继承那点事

    前言: 继承这点事,说多不多,说少不少,这里只描述了一些我认为的基础篇,望各位大神指教.本节参照了C#高级编程和Think in java对继承的描述,我个人认为OOP只是思想,故看明白一个就说通的, ...

  4. C#引用C++代码

    现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...

  5. sencha grid templatecolumn模板列,actioncolumn和renderer实现单元格重绘

    templatecolumn列: {                                     xtype: 'templatecolumn',                     ...

  6. [PE结构分析] 8.输入表结构和输入地址表（IAT）

    在 PE文件头的 IMAGE_OPTIONAL_HEADER 结构中的 DataDirectory(数据目录表) 的第二个成员就是指向输入表的.每个被链接进来的 DLL文件都分别对应一个 IMAGE_ ...

  7. 线段树---Atlantis

    题目网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110064#problem/A Description There are se ...

  8. yii2.0 图片上传（摘录）

    文章来源:http://blog.sina.com.cn/s/blog_88a65c1b0101izmn.html 下面小伙就带领大学学习一下 Yii2.0 的图片上传类的使用,还是老样子,如果代码样 ...

  9. 二、SQL语句映射文件(1)resultMap

    //备注:该博客引自:http://limingnihao.iteye.com/blog/106076 SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对 ...

  10. php学习笔记：读取文档的内容，利用php修改文档内容

    直接上代码 <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016/9/10 0010 * Time: 20:27 ...