jQuery外掛程式AjaxFileUpload實現ajax檔案上傳，jqueryajax上傳外掛程式

最後更新：2016-05-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體為大家分享了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>

以上就是本文的全部內容，希望對大家學習jquery程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More