jQuery插件AjaxFileUpload实现ajax文件上传

本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码，供大家参考，具体内容如下
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
1、引入AjaxFileUpload插件相关的js
复制代码代码如下:<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>
备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。
2、实现上传功能代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ include file="/base.jsp" %><%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>ajax文件上传</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" /><script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script><script type="text/javascript" src="validate/ajaxfileupload.js" ></script><script type="text/javascript">$（function（）{//上传图片$（"#btnUpload"）.click（function（） {alert（ajaxFileUpload（））;}）;}）;function ajaxFileUpload（） {// 开始上传文件时显示一个图片$（"#wait_loading"）.ajaxStart（function（） {$（this）.show（）;// 文件上传完成将图片隐藏起来}）.ajaxComplete（function（） {$（this）.hide（）;}）;var elementIds=["flag"]; //flag为id、name属性名$.ajaxFileUpload（{url: "uploadAjax.htm", type: "post",secureuri: false, //一般设置为falsefileElementId: "file", // 上传文件的id、name属性名dataType: "text", //返回值类型，一般设置为json、application/jsonelementIds: elementIds, //传递参数到服务器success: function（data, status）{ alert（data）;},error: function（data, status, e）{ alert（e）;}}）;//return false;}</script> </head><body><div id="wait_loading" style="padding: 50px 0 0 0;display:none;"><div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div><br></br><div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div><br></br></div><input type="file" id="file" name="file"><br/><input type="hidden" id="flag" name="flag" value="ajax文件上传"/><input type="button" id="btnUpload" value="上传图片" /> </body></html>

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。