jQuery插件AjaxFileUpload實現(xiàn)ajax文件上傳

更新時間：2016年05月05日 14:27:55 作者：Ruthless

這篇文章主要為大家詳細介紹了jQuery插件AjaxFileUpload實現(xiàn)ajax文件上傳的相關(guān)資料,需要的朋友可以參考下

本文實例為大家分享了AjaxFileUpload實現(xiàn)文件上傳的具體代碼，供大家參考，具體內(nèi)容如下

jQuery插件AjaxFileUpload用來實現(xiàn)ajax文件上傳，該插件使用非常簡單，接下來寫個demo演示怎么用AjaxFileUpload插件實現(xiàn)文件上傳。

1、引入AjaxFileUpload插件相關(guān)的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>

備注：測試發(fā)現(xiàn)，ajaxfileupload對jQuery版本是有要求的，在使用中ajaxfileupload和jQuery對應的js版本要一致，不然會導致異常發(fā)生，可以從ajaxfileupload官網(wǎng)下載，避免版本沖突。

2、實現(xiàn)上傳功能代碼

<%@ 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, //傳遞參數(shù)到服務器
  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>

更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進行學習。

以上就是本文的全部內(nèi)容，希望對大家學習jquery程序設計有所幫助。

您可能感興趣的文章: