ajaxfileupload的使用实例

标签：ajaxfileupload   jquery   js   上传文件   上传之前预览   

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

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>

<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

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));
		}
	}
}

<!-- 
上传一个文件并携带多个参数.
 @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>

// 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] );  
	    }  
    } 
});

ajaxfileupload的使用实例

标签：ajaxfileupload   jquery   js   上传文件   上传之前预览   

原文地址：http://blog.csdn.net/sidongxue2/article/details/43952191