jQuery插件AjaxFileUpload实现ajax文件上传


Posted in Javascript onMay 05, 2016

本文实例为大家分享了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, //一般设置为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程序设计有所帮助。

Javascript 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
JavaScript流程控制(分支)
Dec 06 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 #Javascript
javascript执行环境及作用域详解
May 05 #Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 #Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 #Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 #Javascript
使用jquery.form.js实现图片上传的方法
May 05 #Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
浅谈jquery中delegate()与live()
2015/06/22 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python操作mysql数据库
2017/03/05 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
公共事业管理本科生求职信
2013/10/07 职场文书
毕业生找工作的自我评价
2013/10/18 职场文书
《童趣》教学反思
2014/02/19 职场文书
我爱我家教学反思
2014/05/01 职场文书
评职称个人总结
2015/03/05 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库