jQuery插件AjaxFileUpload实现ajax文件上传
2019/6/27 22:27:08
本文主要是介绍jQuery插件AjaxFileUpload实现ajax文件上传,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下
jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
1、引入AjaxFileUpload插件相关的js
<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, //一般设置为false fileElementId: 'file', // 上传文件的id、name属性名 dataType: 'text', //返回值类型,一般设置为json、application/json elementIds: 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>
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。
这篇关于jQuery插件AjaxFileUpload实现ajax文件上传的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南