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, //一般设置为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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaWeb中struts2实现文件上传下载功能实例解析

    在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来比较繁琐,而且不灵活,在学习了struts2后,struts2为文件上传下载提供了更好的实现机制,在这里我分别就单文件上传和多文件上传的源代码进行一下讲解,这里需要导入文件下载上传的两个jar文件,一个是commons-fileupload-1.2.2.jar,另一个是commons-io-2.0.

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • JavaEE中struts2实现文件上传下载功能实例解析

    JavaEE中struts2实现文件上传下载功能实例解析

    本文实例为大家分享了struts2实现文件上传下载的具体实现代码,供大家参考,具体内容如下 一.文件上传 struts提交的文件组件上传, 前台: 1).提交方式POST 2).表单类型 multipart/form-data 3).input type=file 后台: Apache提供的FileUpload组件 核心类: FileItemFactory FileItem的工厂 ServletFileUpload servlet 中的文件上传的核心类 FileItem 封装了上传的表单文件项的

  • 利用ajaxfileupload插件实现文件上传无刷新的具体方法

    做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧

  • AjaxFileUpload+Struts2实现多文件上传功能

    AjaxFileUpload+Struts2实现多文件上传功能

    本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文. 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式接收 1.ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 2.引入jquery-1.8.0.min.js.ajaxFileUpload.js文件 3.文

  • jQuery插件AjaxFileUpload实现ajax文件上传

    本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码,供大家参考,具体内容如下 jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js 复制代码 代码如下: <script type="text/javascript" src="<%=basePath%>resources/js/

  • 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库

    jQuery.AjaxFileUpload.js是一款jQuery插件,用于通过ajax上传文件. 语法: $.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,script,json,htm

  • jQuery Ajax文件上传(php)

    如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

  • 5款Ajax 文件上传控件

    5款Ajax 文件上传控件

    1. FancyUpload (演示地址) FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload. 2. SwfUploadPanel (演示地址) SwfUploadPanel是一个结合SwfUpload v2.0.2与ExtJS 2.0.x开发的多文件上传面板(panel). 3. Yahoo! UI Library: Uploader (演示地址) YUI Uploader Control结合Flash开发

  • Jquery和BigFileUpload实现大文件上传及进度条显示

    Jquery和BigFileUpload实现大文件上传及进度条显示

    实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面,而是要不断地通过ajax获取progress.aspx返回的进度信息,所以用到了jquery.form的ajaxform提交.ajaxform提交后如果执行提交后的事件,比如在数据库里插入记录,还在调试中. 1.用到了jquery 的 progressbar .form.MultF

  • Ajax 文件上传进度监听之upload.onprogress案例详解

    $.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compati

  • iframe实现Ajax文件上传效果示例

    复制代码 代码如下: <span style="font-family: verdana, 'ms song', 宋体, Arial, 微软雅黑, Helvetica, sans-serif; font-size: 14px; line-height: 21px; text-align: left; background-color: rgb(255, 254, 247); ">avascript部分</span> 复制代码 代码如下: <!doctype

  • File, FileReader 和 Ajax 文件上传实例分析(php)

    File, FileReader 和 Ajax 文件上传实例分析(php)

    File FileReader 可以干什么? Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码数据(readAsDataURL),2进制字符串(readAsBinaryString),文本(readAsText)并且都是异步的. 对了,Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成. File 对象 File对象可以从 input[type=file].files 数组,和拖拽事件 event.dataTransfer.files 中

  • php+ajax 文件上传代码实例

    本文实例为大家分享了php+ajax 文件上传的具体代码,供大家参考,具体内容如下 html 代码 <form action="{pboot:form fcode=8}" method="post" id="t" enctype="multipart/form-data"> <input type="file" name='tables_a' id="tables" o

  • 基于Jquery插件实现跨域异步上传文件功能

    基于Jquery插件实现跨域异步上传文件功能

    先说明白 这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可. 再做事 1 Jquery.form的使用 <form method="post" act

随机推荐