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

本文实例为大家分享了AjaxFileUpload实现文件上传的具体代码，供大家参考，具体内容如下

jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。

1、引入AjaxFileUpload插件相关的js

代码如下:

<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js?1.1.9">《script》
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js?1.1.9">《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+"/";%>                            <script type="text/javascript" src="validate/jquery-1.6.2.min.js?1.1.9">《script》  <script type="text/javascript" src="validate/ajaxfileupload.js?1.1.9" >《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》     
    

/images/loading.gif"/>
    

    
请稍等...
    

  
  
     

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