ajaxfileupload的使用实例

今天简单总结一下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" οnchange="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" οnchange="document.getElementById('photoName').innerHTML=this.value"/><input type="button" class="upFileButton" οnclick="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 framevar 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 attributesjQuery(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 requestsif ( s.global && ! jQuery.active++ ){jQuery.event.trigger( "ajaxStart" );}            var requestDone = false;// Create the request objectvar xml = {};   if ( s.global )jQuery.event.trigger("ajaxSend", [xml, s]);// Wait for a response to come backvar 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 notmodifiedif ( 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 dataif ( s.success )s.success( data, status );// Fire the global callbackif( s.global )jQuery.event.trigger( "ajaxSuccess", [xml, s] );} elsejQuery.handleError(s, xml, status);} catch(e){status = "error";jQuery.handleError(s, xml, status, e);}// The request was completedif( s.global )jQuery.event.trigger( "ajaxComplete", [xml, s] );// Handle the global AJAX counterif ( s.global && ! --jQuery.active )jQuery.event.trigger( "ajaxStop" );// Process resultif ( 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 checkerif ( s.timeout > 0 ){setTimeout(function(){// Check to see if the request is still happeningif( !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 contextif (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 htmlif (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 itif ( 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的使用实例相关推荐

前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
Spring Cloud微服务系统架构的一些简单介绍和使用
Spring Cloud 目录特征云原生应用程序 Spring Cloud上下文:应用程序上下文服务引导应用程序上下文应用程序上下文层次结构改变Bootstrap的位置Properties ...
mvc js ajax实例,MVC ajax异步上传文件例子(ajaxFileUpload)
[实例简介] [实例截图] [核心代码] $(function () { $(":button").click(function () { if ($("#file1&q ...
jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload. ...
ajax图片上传插件demo,jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）...
这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章的一个收关.但是最初也是因为想做这么一个功能,一点一点的引发出了好多问题,不断去学习,研究,才写了这三篇. 早些时候已经实现了上 ...
ajaxFileUpload文件上传
一.简介 ajaxFileUpload是一种异步的文件上传控件,通过ajax进行文件上传,并获取上传处理结果.在很多时候我们需要使用到文件上传的功能,但是不需要使用那些强大的上传插件.此时就可以使用a ...
jq ajax异步上传图片插件,jQuery异步上传文件插件ajaxFileUpload详细介绍
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...
php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传过程,同时支撑多文 ...

ajaxfileupload的使用实例

ajaxfileupload的使用实例相关推荐

最新文章

热门文章