ajaxfileupload的使用实例

http://blog.csdn.net/sidongxue2/article/details/43952191

今天简单总结一下ajaxfileupload的用法，具体实例如下:

1.上传一个文件并携带多个参数.
2.上传多个文件并携带多个参数.
  扩展:可以通过jquery扩展为添加文件选择框,去除文件选择框,而不是写死只能上传几个文件.
3.上传一个文件并携带多个参数,同时上传完成之后,及时显示.
4.上传一个文件并携带多个参数,上传之前实现预览.

5.上传一个文件,并携带多个参数. 

   通过css将界面完善的更加人性化:点击图片选择文件.

项目通过maven构建,前后台通过springmvc交互数据,spring采用注解方式.

a.闲话少说先看web.xml文件,如下:

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app version="2.5"
     xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
   <display-name>message-web</display-name>

     <!-- 配置log4j配置文件和监听器 -->
     <context-param>
             <param-name>log4jConfigLocation</param-name>
             <param-value>classpath:log4j.properties</param-value>
     </context-param>
     <listener>
        <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
     </listener>

     <!-- 配置springmvc主控servlet -->
     <servlet>
         <servlet-name>springmvc</servlet-name>
         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
         <init-param>
             <param-name>contextConfigLocation</param-name>
             <param-value>classpath:springmvc.xml</param-value>
         </init-param>
     </servlet>
     <servlet-mapping>
         <servlet-name>springmvc</servlet-name>
         <url-pattern>*.mvc</url-pattern>
     </servlet-mapping>

     <!-- 添加字符集过滤器 -->
     <filter>
         <filter-name>encodingFilter</filter-name>
         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
         <init-param>
             <param-name>encoding</param-name>
             <param-value>UTF-8</param-value>
         </init-param>
     </filter>
     <filter-mapping>
         <filter-name>encodingFilter</filter-name>
         <url-pattern>/*</url-pattern>
     </filter-mapping>
 </web-app>

b.接着看spring配置文件和log4j配置文件,

 <beans xmlns="http://www.springframework.org/schema/beans"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
     xmlns:context="http://www.springframework.org/schema/context"
     xsi:schemaLocation="http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
         http://www.springframework.org/schema/context
         http://www.springframework.org/schema/context/spring-context-4.0.xsd">

     <!-- 配置controller扫描 -->
     <context:component-scan base-package="com.ilucky.ajaxfileupload" />

     <!-- 设置上传文件的最大尺寸为100MB -->
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
         <property name="maxUploadSize">
             <value>102400000</value>
         </property>
     </bean>
 </beans>

 #Loggers
 log4j.rootLogger=debug,console,file

 #console
 log4j.appender.console=org.apache.log4j.ConsoleAppender
 log4j.appender.console.Threshold = DEBUG
 log4j.appender.console.layout=org.apache.log4j.PatternLayout
 log4j.appender.console.layout.ConversionPattern=[%d]-%p-%l-%m%n

 #file
 log4j.appender.file=org.apache.log4j.RollingFileAppender
 log4j.appender.file.Append = true
 log4j.appender.file.Threshold = DEBUG
 log4j.appender.file.ImmediateFlush = true
 log4j.appender.file.File=../webapps/ajaxfileupload.log
 log4j.appender.file.MaxFileSize=2500KB
 log4j.appender.file.MaxBackupIndex=20
 log4j.appender.file.layout=org.apache.log4j.PatternLayout
 log4j.appender.file.layout.ConversionPattern=[%d]-%p-%l-%m%n

c.然后看控制类.

 package com.ilucky.ajaxfileupload;

 import java.io.File;
 import java.io.PrintWriter;
 import java.util.HashMap;
 import java.util.Map;

 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;

 import org.apache.log4j.Logger;
 import org.springframework.context.annotation.Scope;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.multipart.MultipartFile;

 import com.alibaba.fastjson.JSON;

 /**
  * 注意:
  * 1.如果从前台传到后台的数据出现中文乱码,在web.xml文件中配置字符集过滤器.
  * 2.如果从后台传到前台的数据出现中文乱码,为response设置编码方式.
  * @author IluckySi
  * @since 20150213
  */
 @Controller("uploadFileController")
 @Scope("prototype")
 @RequestMapping("/uploadFileController")
 public class UploadFileController {

     private static Logger logger = Logger.getLogger(UploadFileController.class);

     @RequestMapping("/ajaxfileupload")
     public void ajaxfileupload(HttpServletRequest request, HttpServletResponse response,
             @RequestParam(value = "username", required = true) String username,
             @RequestParam(value = "password", required = true) String password,
             @RequestParam(value = "photo", required = true) MultipartFile photo) {

         logger.info("后台收到参数: username = " + username + ", password = " + password +
                 ", photo = " + photo.getOriginalFilename());
         response.setCharacterEncoding("utf-8");
         PrintWriter pw = null;
         Map<String, String> result = new HashMap<String, String>();
         String imagePath = request.getSession().getServletContext().getRealPath("/");
         String imageName = "image/" + photo.getOriginalFilename().replace(" ", "");
         try {
             /**
              * 模拟位置1:前台error方法.
              * 模拟代码:int j = 2/0;
              */
             pw = response.getWriter();
             /**
              * 模拟位置2:前台success方法.
              * 模拟代码:int j = 2/0;
              */
             if(photo.getSize() > 0) {
                 photo.transferTo(new File(imagePath + imageName));
                 logger.info("存储图片成功: " + photo.getOriginalFilename());
             }
             result.put("result", "success");
             result.put("message", "存储图片成功！");
         } catch (Exception e) {
             logger.error("存储图片失败:" + e);
             result.put("result", "failure");
             result.put("message", "存储图片失败！");
         } finally {
             pw.print(JSON.toJSONString(result));
         }
     }

     @RequestMapping("/ajaxfileupload2")
     public void ajaxfileupload2(HttpServletRequest request, HttpServletResponse response,
             @RequestParam(value = "username", required = true) String username,
             @RequestParam(value = "password", required = true) String password,
             @RequestParam(value = "photo", required = true) MultipartFile[] photo) {

         logger.info("后台收到参数: username = " + username + ", password = " + password +
                 ", photo = " + photo.length);
         response.setCharacterEncoding("utf-8");
         PrintWriter pw = null;
         Map<String, String> result = new HashMap<String, String>();
         String imagePath = request.getSession().getServletContext().getRealPath("/");
         try {
             pw = response.getWriter();
             for(int i = 0; i < photo.length; i++) {
                 MultipartFile p = photo[i];
                 if(p.getSize() > 0) {
                     String imageName = "image/" + p.getOriginalFilename().replace(" ", "");
                     p.transferTo(new File(imagePath + imageName));
                     logger.info("存储图片成功: " + p.getOriginalFilename());
                 }
             }
             result.put("result", "success");
             result.put("message", "存储图片成功！");
         } catch (Exception e) {
             logger.error("存储图片失败:" + e);
             result.put("result", "failure");
             result.put("message", "存储图片失败！");
         } finally {
             pw.print(JSON.toJSONString(result));
         }
     }

     @RequestMapping("/ajaxfileupload3")
     public void ajaxfileupload3(HttpServletRequest request, HttpServletResponse response,
             @RequestParam(value = "username", required = true) String username,
             @RequestParam(value = "password", required = true) String password,
             @RequestParam(value = "photo", required = true) MultipartFile photo) {

         logger.info("后台收到参数: username = " + username + ", password = " + password +
                 ", photo = " + photo.getOriginalFilename());
         response.setCharacterEncoding("utf-8");
         PrintWriter pw = null;
         Map<String, String> result = new HashMap<String, String>();
         String imagePath = request.getSession().getServletContext().getRealPath("/");
         String imageName = "image/" + photo.getOriginalFilename().replace(" ", "");
         try {
             pw = response.getWriter();
             if(photo.getSize() > 0) {
                 photo.transferTo(new File(imagePath + imageName));
                 logger.info("存储图片成功: " + photo.getOriginalFilename());
             }
             result.put("result", "success");
             result.put("message", imageName);
         } catch (Exception e) {
             logger.error("存储图片失败:" + e);
             result.put("result", "failure");
             result.put("message", "存储图片失败！");
         } finally {
             pw.print(JSON.toJSONString(result));
         }
     }

     @RequestMapping("/ajaxfileupload4")
     public void ajaxfileupload4(HttpServletRequest request, HttpServletResponse response,
             @RequestParam(value = "username", required = true) String username,
             @RequestParam(value = "password", required = true) String password,
             @RequestParam(value = "photo", required = true) MultipartFile photo) {

         logger.info("后台收到参数: username = " + username + ", password = " + password +
                 ", photo = " + photo.getOriginalFilename());
         response.setCharacterEncoding("utf-8");
         PrintWriter pw = null;
         Map<String, String> result = new HashMap<String, String>();
         String imagePath = request.getSession().getServletContext().getRealPath("/");
         String imageName = "image/" + photo.getOriginalFilename().replace(" ", "");
         try {
             pw = response.getWriter();
             if(photo.getSize() > 0) {
                 photo.transferTo(new File(imagePath + imageName));
                 logger.info("存储图片成功: " + photo.getOriginalFilename());
             }
             result.put("result", "success");
             result.put("message", "存储图片成功！");
         } catch (Exception e) {
             logger.error("存储图片失败:" + e);
             result.put("result", "failure");
             result.put("message", "存储图片失败！");
         } finally {
             pw.print(JSON.toJSONString(result));
         }
     }

     @RequestMapping("/ajaxfileupload5")
     public void ajaxfileupload5(HttpServletRequest request, HttpServletResponse response,
             @RequestParam(value = "username", required = true) String username,
             @RequestParam(value = "password", required = true) String password,
             @RequestParam(value = "photo", required = true) MultipartFile photo) {

         logger.info("后台收到参数: username = " + username + ", password = " + password +
                 ", photo = " + photo.getOriginalFilename());
         response.setCharacterEncoding("utf-8");
         PrintWriter pw = null;
         Map<String, String> result = new HashMap<String, String>();
         String imagePath = request.getSession().getServletContext().getRealPath("/");
         String imageName = "image/" + photo.getOriginalFilename().replace(" ", "");
         try {
             pw = response.getWriter();
             if(photo.getSize() > 0) {
                 photo.transferTo(new File(imagePath + imageName));
                 logger.info("存储图片成功: " + photo.getOriginalFilename());
             }
             result.put("result", "success");
             result.put("message", "存储图片成功！");
         } catch (Exception e) {
             logger.error("存储图片失败:" + e);
             result.put("result", "failure");
             result.put("message", "存储图片失败！");
         } finally {
             pw.print(JSON.toJSONString(result));
         }
     }
 }

d.依次看5个实例.

 <!--
 上传一个文件并携带多个参数.
  @author IluckySi
  @since 20150213
  -->
 <%@ 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>test</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">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="${pageContext.request.contextPath}/js/jquery-1.11/jquery.min.js"></script>
     <script src="${pageContext.request.contextPath}/js/ajaxfileupload/ajaxfileupload.js"></script>
     <script>
     var uploadUrl = '${pageContext.request.contextPath}/uploadFileController/ajaxfileupload.mvc';
     $(function(){
         $('#upload').click(function(e){
             var username = $('#username').val();
             var password = $('#password').val();
             var isValidate = false;
             if(username == '' || password == '') {
                   $('#prompt').html('<span style="color:red">用户名和密码是必填项!</span>');
             } else {
                 isValidate = true;
             }
             if(isValidate) {
                 $.ajaxFileUpload({
                     url:uploadUrl,
                     secureuri:false,
                     //文件选择框的id属性.
                     fileElementId:'photo',
                     dataType: 'json',
                     data:{
                         username:username,
                         password:password
                     },
                     //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
                     success: function (data, status) {
                         if(data.result == 'success') {
                             alert(data.message);
                             //继续成功的逻辑...
                         } else {
                             alert(data.message);
                             //继续失败的逻辑...
                         }
                      },
                      //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
                      //换句话说如果后台的异常没有捕获到,则认为是error.
                     error: function (s, xml, status, e){
                         console.info('上传图片失败:未知异常!');
                      }
                 });
              }
         });
     });
     </script>
   </head>
   <body>
     <form id="form" method="post" enctype="multipart/form-data">
         <input id="username" name="username" type="text" value="请输入姓名"/>
         <input id="password" name="password" type="password" value="请输入密码"/>
         <input id="photo" name="photo" type="file"/>
         <img id="img" src=""/>
         <input id="upload" type="button" value="上传"/>
     </form>
     <div id="prompt"></div>
   </body>
 </html>

 <!--
 上传多个文件并携带多个参数.
 扩展:可以通过jquery扩展为添加文件选择框,去除文件选择框,而不是写死只能上传几个文件.
  @author IluckySi
  @since 20150213
  -->
 <%@ 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>test</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">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="${pageContext.request.contextPath}/js/jquery-1.11/jquery.min.js"></script>
     <script src="${pageContext.request.contextPath}/js/ajaxfileupload/ajaxfileupload.js"></script>
     <script>
     var uploadUrl = '${pageContext.request.contextPath}/uploadFileController/ajaxfileupload2.mvc';
     $(function(){
         $('#upload').click(function(e){
             var username = $('#username').val();
             var password = $('#password').val();
             var isValidate = false;
             if(username == '' || password == '') {
                   $('#prompt').html('<span style="color:red">用户名和密码是必填项!</span>');
             } else {
                 isValidate = true;
             }
             if(isValidate) {
                 $.ajaxFileUpload({
                     url:uploadUrl,
                     secureuri:false,
                     //文件选择框的id属性.
                     fileElementId:['photo1', 'photo2', 'photo3'],
                     dataType: 'json',
                     data:{
                         username:username,
                         password:password
                     },
                     //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
                     success: function (data, status) {
                         if(data.result == 'success') {
                             alert(data.message);
                             //继续成功的逻辑...
                         } else {
                             alert(data.message);
                             //继续失败的逻辑...
                         }
                      },
                      //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
                      //换句话说如果后台的异常没有捕获到,则认为是error.
                     error: function (s, xml, status, e){
                         console.info('上传图片失败:未知异常!');
                      }
                 });
              }
         });
     });
     </script>
   </head>
   <body>
     <form id="form" method="post" enctype="multipart/form-data">
         <input id="username" name="username" type="text" value="请输入姓名"/>
         <input id="password" name="password" type="password" value="请输入密码"/>
         <input id="photo1" name="photo" type="file"/>
         <input id="photo2" name="photo" type="file"/>
         <input id="photo3" name="photo" type="file"/>
         <input id="upload" type="button" value="上传"/>
     </form>
     <div id="prompt"></div>
   </body>
 </html>

 <!--
 上传一个文件并携带多个参数,同时上传完成之后,及时显示.
  @author IluckySi
  @since 20150213
  -->
 <%@ 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>test</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">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="${pageContext.request.contextPath}/js/jquery-1.11/jquery.min.js"></script>
     <script src="${pageContext.request.contextPath}/js/ajaxfileupload/ajaxfileupload.js"></script>
     <script>
     var uploadUrl = '${pageContext.request.contextPath}/uploadFileController/ajaxfileupload3.mvc';
     $(function(){
         $('#upload').click(function(e){
             var username = $('#username').val();
             var password = $('#password').val();
             var isValidate = false;
             if(username == '' || password == '') {
                   $('#prompt').html('<span style="color:red">用户名和密码是必填项!</span>');
             } else {
                 isValidate = true;
             }
             if(isValidate) {
                 $.ajaxFileUpload({
                     url:uploadUrl,
                     secureuri:false,
                     //文件选择框的id属性.
                     fileElementId:'photo',
                     dataType: 'json',
                     data:{
                         username:username,
                         password:password
                     },
                     //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
                     success: function (data, status) {
                         if(data.result == 'success') {
                             //及时预览.
                             $('#img').attr('src', data.message).
                                 attr('width', '100px').
                                 attr('height', '100px');
                             //继续成功的逻辑...
                         } else {
                             alert(data.message);
                             //继续失败的逻辑...
                         }
                      },
                      //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
                      //换句话说如果后台的异常没有捕获到,则认为是error.
                     error: function (s, xml, status, e){
                         console.info('上传图片失败:未知异常!');
                      }
                 });
              }
         });
     });
     </script>
   </head>
   <body>
     <form id="form" method="post" enctype="multipart/form-data">
         <input id="username" name="username" type="text" value="请输入姓名"/>
         <input id="password" name="password" type="password" value="请输入密码"/>
         <input id="photo" name="photo" type="file"/>
         <img id="img" src=""/>
         <input id="upload" type="button" value="上传"/>
     </form>
     <div id="prompt"></div>
   </body>
 </html>

 <!--
 上传一个文件并携带多个参数,上传之前实现预览.
 难点:
 对于Chrome,Firefox和IE10使用 FileReader来实现.
 对于IE6~9使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来实现.
  @author IluckySi
  @since 20150213
  -->
 <%@ 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>test</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">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="${pageContext.request.contextPath}/js/jquery-1.11/jquery.min.js"></script>
     <script src="${pageContext.request.contextPath}/js/ajaxfileupload/ajaxfileupload.js"></script>
     <script>
     var uploadUrl = '${pageContext.request.contextPath}/uploadFileController/ajaxfileupload4.mvc';
     $(function(){
         $('#upload').click(function(e){
             var username = $('#username').val();
             var password = $('#password').val();
             var isValidate = false;
             if(username == '' || password == '') {
                   $('#prompt').html('<span style="color:red">用户名和密码是必填项!</span>');
             } else {
                 isValidate = true;
             }
             if(isValidate) {
                 $.ajaxFileUpload({
                     url:uploadUrl,
                     secureuri:false,
                     //文件选择框的id属性.
                     fileElementId:'photo',
                     dataType: 'json',
                     data:{
                         username:username,
                         password:password
                     },
                     //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
                     success: function (data, status) {
                         if(data.result == 'success') {
                             alert(data.message);
                             //继续成功的逻辑...
                         } else {
                             alert(data.message);
                             //继续失败的逻辑...
                         }
                      },
                      //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
                      //换句话说如果后台的异常没有捕获到,则认为是error.
                     error: function (s, xml, status, e){
                         console.info('上传图片失败:未知异常!');
                      }
                 });
              }
         });
     });

     //重点:图片预览.
     function preview(file){
         var preview = document.getElementById('preview');
         if (file.files && file.files[0]) {
             var reader = new FileReader();
             reader.onload = function(event){
                 preview.innerHTML = '<img src="' + event.target.result + '" width="100px" height="100px"/>';
             };
             reader.readAsDataURL(file.files[0]);
         } else {
             //没有用IE6~9进行测试.
             preview.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
         }
     }
     </script>
   </head>
   <body>
     <form id="form" method="post" enctype="multipart/form-data">
         <input id="username" name="username" type="text" value="请输入姓名"/>
         <input id="password" name="password" type="password" value="请输入密码"/>
         <input id="photo" name="photo" type="file" onchange="preview(this)"/>
         <div id="preview"></div>
         <input id="upload" type="button" value="上传"/>
     </form>
     <div id="prompt"></div>
   </body>
 </html>

 <!--
 上传一个文件,并携带多个参数.
 <p>通过css将界面完善的更加人性化:点击图片选择文件.
  @author IluckySi
  @since 20150226
  -->
 <%@ 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>test</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">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="${pageContext.request.contextPath}/js/jquery-1.11/jquery.min.js"></script>
     <script src="${pageContext.request.contextPath}/js/ajaxfileupload/ajaxfileupload.js"></script>
     <style type="text/css">
     .fileDiv{
         width:100px;
         height:40px;
         background:url(image/test.png);
         overflow:hidden;
         position:relative;
     }
     .photo{
         position:absolute;
         top:-100px;
     }
     .upFileButton{
         width:100px;
         height:40px;
         opacity:0;
         filter:alpha(opacity=0);
         cursor:pointer;
     }
     </style>
     <script>
     var uploadUrl = '${pageContext.request.contextPath}/uploadFileController/ajaxfileupload5.mvc';
     $(function(){
         $('#upload').click(function(e){
             var username = $('#username').val();
             var password = $('#password').val();
             var isValidate = false;
             if(username == '' || password == '') {
                   $('#prompt').html('<span style="color:red">用户名和密码是必填项!</span>');
             } else {
                 isValidate = true;
             }
             if(isValidate) {
                 $.ajaxFileUpload({
                     url:uploadUrl,
                     secureuri:false,
                     //文件选择框的id属性.
                     fileElementId:'photo',
                     dataType: 'json',
                     data:{
                         username:username,
                         password:password
                     },
                     //注意:这里的success方法代表的是前台成功接收了后台返回的数据.
                     success: function (data, status) {
                         if(data.result == 'success') {
                             alert(data.message);
                             //继续成功的逻辑...
                         } else {
                             alert(data.message);
                             //继续失败的逻辑...
                         }
                      },
                      //注意:如果后前台没有成功接收后台返回的数据,则认为上传失败.
                      //换句话说如果后台的异常没有捕获到,则认为是error.
                     error: function (s, xml, status, e){
                         console.info('上传图片失败:未知异常!');
                      }
                 });
              }
         });
     });
     </script>
   </head>
   <body>
     <form id="form" method="post" enctype="multipart/form-data">
         <input id="username" name="username" type="text" value="请输入姓名"/>
         <input id="password" name="password" type="password" value="请输入密码"/>
         <div id="fileDiv" class="fileDiv">
             <input type="file" id="photo" name="photo" class="photo" onchange="document.getElementById('photoName').innerHTML=this.value"/>
             <input type="button" class="upFileButton" onclick="document.getElementById('photo').click()" />
         </div>
         <div id="photoName">图片文件名称</div>
         <input id="upload" class="upload" type="button" value="上传"/>
     </form>
     <div id="prompt"></div>
   </body>
 </html>
 </p>

e.最重要的是看ajaxfileupload.js文件,此文件进行了扩展,都是从网上找到的.

 // JavaScript Document
 jQuery.extend({
      createUploadIframe: function(id, uri){
         //create frame
         var frameId = 'jUploadFrame' + id;
         var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
         if(window.ActiveXObject){
             if(typeof uri== 'boolean'){
                 iframeHtml += ' src="' + 'javascript:false' + '"';

             }
             else if(typeof uri== 'string'){
                 iframeHtml += ' src="' + uri + '"';

             }
         }
         iframeHtml += ' />';
         jQuery(iframeHtml).appendTo(document.body);
         return jQuery('#' + frameId).get(0);
     },


     createUploadForm: function(id, fileElementId, data) {
         //create form
         var formId = 'jUploadForm' + id;
         var fileId = 'jUploadFile' + id;
         var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
         //使ajaxfileupload支持增加附加参数.
         if(data){
             for(var i in data){
                 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
             }
         }
         //ajaxFileupload默认是只能上传一个文件,替换如下代码地实现多个文件上传.
         if (typeof(fileElementId) == 'string') {
           fileElementId = [fileElementId];
         }
        for (var i in fileElementId) {
           var oldElement = jQuery('#' + fileElementId[i]);
           var newElement = jQuery(oldElement).clone();
           jQuery(oldElement).attr('id', fileId);
           jQuery(oldElement).before(newElement);
           jQuery(oldElement).appendTo(form);

       }
       /*var oldElement = jQuery('#' + fileElementId);
       var newElement = jQuery(oldElement).clone();
       jQuery(oldElement).attr('id', fileId);
       jQuery(oldElement).before(newElement);
       jQuery(oldElement).appendTo(form);*/
       //set attributes
       jQuery(form).css('position', 'absolute');
       jQuery(form).css('top', '-1200px');
       jQuery(form).css('left', '-1200px');
       jQuery(form).appendTo('body');
       return form;
     },

     ajaxFileUpload: function(s) {
         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
         s = jQuery.extend({}, jQuery.ajaxSettings, s);
         var id = new Date().getTime();
         var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
         var io = jQuery.createUploadIframe(id, s.secureuri);
         var frameId = 'jUploadFrame' + id;
         var formId = 'jUploadForm' + id;
         // Watch for a new set of requests
         if ( s.global && ! jQuery.active++ ){
             jQuery.event.trigger( "ajaxStart" );
         }
         var requestDone = false;
         // Create the request object
         var xml = {};
         if ( s.global )
             jQuery.event.trigger("ajaxSend", [xml, s]);
         // Wait for a response to come back
         var uploadCallback = function(isTimeout){
             var io = document.getElementById(frameId);
             try {
                 if(io.contentWindow){
                      xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                      xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

                 }else if(io.contentDocument){
                      xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                      xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
                 }
             }catch(e){
                 jQuery.handleError(s, xml, null, e);
             }
             if (xml || isTimeout == "timeout"){
                 requestDone = true;
                 var status;
                 try {
                     status = isTimeout != "timeout" ? "success" : "error";
                     // Make sure that the request was successful or notmodified
                     if ( status != "error" ){
                         // process the data (runs the xml through httpData regardless of callback)
                         var data = jQuery.uploadHttpData(xml, s.dataType );
                         // If a local callback was specified, fire it and pass it the data
                         if ( s.success )
                             s.success( data, status );
                         // Fire the global callback
                         if( s.global )
                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                     } else
                         jQuery.handleError(s, xml, status);
                 } catch(e){
                     status = "error";
                     jQuery.handleError(s, xml, status, e);
                 }
                 // The request was completed
                 if( s.global )
                     jQuery.event.trigger( "ajaxComplete", [xml, s] );
                 // Handle the global AJAX counter
                 if ( s.global && ! --jQuery.active )
                     jQuery.event.trigger( "ajaxStop" );
                 // Process result
                 if ( s.complete )
                     s.complete(xml, status);
                 jQuery(io).unbind();
                 setTimeout(function(){
                     try {
                         jQuery(io).remove();
                         jQuery(form).remove();

                     } catch(e){
                         jQuery.handleError(s, xml, null, e);
                     }
                 }, 100);
                 xml = null;
             }
         };
         // Timeout checker
         if ( s.timeout > 0 ){
             setTimeout(function(){
                 // Check to see if the request is still happening
                 if( !requestDone ) uploadCallback( "timeout" );
             }, s.timeout);
         }
         try {
             var form = jQuery('#' + formId);
             jQuery(form).attr('action', s.url);
             jQuery(form).attr('method', 'POST');
             jQuery(form).attr('target', frameId);
             if(form.encoding){
                 jQuery(form).attr('encoding', 'multipart/form-data');
             }
             else{
                 jQuery(form).attr('enctype', 'multipart/form-data');
             }
             jQuery(form).submit();

         } catch(e) {
             jQuery.handleError(s, xml, null, e);
         }
         jQuery('#' + frameId).load(uploadCallback);
         return {abort: function () {}};

     },

     uploadHttpData: function( r, type ) {
         var data = !type;
         data = type == "xml" || data ? r.responseXML : r.responseText;
         // If the type is "script", eval it in global context
         if (type == "script" )
             jQuery.globalEval( data );
         // Get the JavaScript object, if JSON is used.
         if (type == "json" )
             //针对ajaxfileupload返回json带<pre>标签解,
             //决方案为将eval( "data = " + data );换成data = jQuery.parseJSON(jQuery(data).text());
             //eval( "data = " + data );
             data = jQuery.parseJSON(jQuery(data).text());
         // evaluate scripts within html
         if (type == "html" )
             jQuery("<div>").html(data).evalScripts();

         return data;
     },

     //针对ajaxfileupload.js结合低版本jquery报异常:TypeError: jQuery.handleError is not a function,添加如下代码.
     handleError: function( s, xhr, status, e )      {
         // If a local callback was specified, fire it
         if ( s.error ) {
             s.error.call( s.context || s, xhr, status, e );
         }
         // Fire the global callback
         if ( s.global ) {
             (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
         }
     }
 });

大功告成, 亲以后有什么简答的上传工作，就交给他吧！！！