当前位置:Gxlcms > JavaScript > jQuery插件AjaxFileUpload实现ajax文件上传

jQuery插件AjaxFileUpload实现ajax文件上传

时间:2021-07-01 10:21:17 帮助过:5人阅读

本文实例为大家分享了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、实现上传功能代码

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ include file="/base.jsp" %>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9. <head>
  10. <base href="<%=basePath%>">
  11. <title>ajax文件上传</title>
  12. <meta http-equiv="pragma" content="no-cache">
  13. <meta http-equiv="cache-control" content="no-cache">
  14. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  15. <meta http-equiv="expires" content="0">
  16. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  17. <meta http-equiv="description" content="This is my page">
  18. <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
  19. <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
  20. <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
  21. <script type="text/javascript">
  22. $(function(){
  23. //上传图片
  24. $("#btnUpload").click(function() {
  25. alert(ajaxFileUpload());
  26. });
  27. });
  28. function ajaxFileUpload() {
  29. // 开始上传文件时显示一个图片
  30. $("#wait_loading").ajaxStart(function() {
  31. $(this).show();
  32. // 文件上传完成将图片隐藏起来
  33. }).ajaxComplete(function() {
  34. $(this).hide();
  35. });
  36. var elementIds=["flag"]; //flag为id、name属性名
  37. $.ajaxFileUpload({
  38. url: 'uploadAjax.htm',
  39. type: 'post',
  40. secureuri: false, //一般设置为false
  41. fileElementId: 'file', // 上传文件的id、name属性名
  42. dataType: 'text', //返回值类型,一般设置为json、application/json
  43. elementIds: elementIds, //传递参数到服务器
  44. success: function(data, status){
  45. alert(data);
  46. },
  47. error: function(data, status, e){
  48. alert(e);
  49. }
  50. });
  51. //return false;
  52. }
  53. </script>
  54. </head>
  55. <body>
  56. <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
  57. <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
  58. <br></br>
  59. <div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>
  60. <br></br>
  61. </div>
  62. <input type="file" id="file" name="file"><br/>
  63. <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
  64. <input type="button" id="btnUpload" value="上传图片" />
  65. </body>
  66. </html>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

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

人气教程排行