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 相关文章推荐
js中eval详解
Mar 30 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
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
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
理解JS绑定事件
2016/01/19 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
javascript防篡改对象实例详解
2017/04/10 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
java直接调用python脚本的例子
2014/02/16 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python简单实现enum功能的方法
2016/04/25 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android