jQuery外掛AjaxFileUpload實作ajax檔上傳_jquery
本文實例為大家分享了AjaxFileUpload實作檔案上傳的具體程式碼，供大家參考，具體內容如下
jQuery外掛AjaxFileUpload用來實作ajax檔案上傳，外掛程式使用非常簡單，接下來寫個demo示範怎麼用AjaxFileUpload外掛實作檔案上傳。
1、引入AjaxFileUpload外掛相關的js
備註：測試發現，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程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在 Golang 中使用 gRPC 實作檔案上傳？
Jun 03, 2024 pm 04:54 PM
如何使用gRPC實作檔案上傳？建立配套服務定義，包括請求和回應訊息。在客戶端，開啟要上傳的檔案並將其分成區塊，然後透過gRPC串流傳輸到服務端。在服務端，接收文件區塊並將其儲存到文件中。服務端在文件上傳完成後發送回應，指示上傳是否成功。
用Golang函數簡化檔案上傳處理
May 02, 2024 pm 06:45 PM
答案：是，Golang提供的函數可以簡化檔案上傳處理。詳情：MultipartFile類型提供對文件元資料和內容的存取。 FormFile函數從表單請求中取得特定檔案。 ParseForm和ParseMultipartForm函數用於解析表單資料和多部分錶單資料。使用這些函數簡化了文件處理流程，讓開發者專注於業務邏輯。
如何在 Golang 中實現拖放檔案上傳？
Jun 05, 2024 pm 12:48 PM
如何在Golang中實現拖放檔案上傳？啟用中間件；處理檔案上傳請求；建立拖曳區域的HTML程式碼；新增處理拖曳事件的JavaScript程式碼。
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
如何使用Ajax從PHP方法取得變數？
Mar 09, 2024 pm 05:36 PM
使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
