简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Ajax非同步上傳檔案實列（附程式碼）

php中世界最好的语言
發布： 2018-04-04 13:49:46
原創
1231 人瀏覽過

這次帶給大家Ajax非同步上傳檔案實列（附程式碼），Ajax非同步上傳檔案的注意事項有哪些，以下就是實戰案例，一起來看一下。

非常不多說，直接給大家上乾貨，寫的不好還請見諒。

具體程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<title>Index</title>
<script>
$(function() {
$(':button').click(function () {
var formData = new FormData();
var file = $("input[type='file']")[0].files[0];
formData.append("files", file);
$.ajax({
url: '/Upload/Upload', //server script to process data
type: 'POST',
//Ajax事件
//beforeSend: beforeSendHandler,
//success: completeHandler,
//error: errorHandler,
// Form数据
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data">
<input name="file" type="file" multiple="multiple" />
<input type="button" value="Upload" />
<input type="text" name="userName" value="ice" />
</form>
</body>
</html>
登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery+ajax怎麼實作json資料的遍歷

Ajax實作考試倒數計時並自動提交試卷功能

以上是Ajax非同步上傳檔案實列（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
ajax 程式碼 文件
來源：php.cn
上一篇：android與js的交互之jsbridge使用 下一篇：ajax訪問到Session失效如何處理
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用 AJAX、PHP 和伺服器發送事件從 OpenAI 的 API 串流數據 如何使用伺服器傳送事件(SSE)將資料從上述API串流傳輸到使用JavaScript和PHP的瀏覽器客戶端？我已經研究這個問題好幾個小時了，但我似乎無法弄清楚出了什麼問題。作為參考...
來自於 2023-11-11 12:03:23
0
1
497
在使用AJAX請求的回應上進行JSON解析時，出現了未捕獲的語法錯誤：意外的令牌'<'，"<br /> 我正在使用datefrom和dateto製作一個下拉式選單，然後顯示這些日期之間的日期，但它沒有顯示，並且我不斷在控制台中收到此錯誤訊息。 VM652:1UncaughtSynta...
來自於 2023-11-01 10:06:57
0
1
269
不離開頁面執行PHP 我有一個表單-textarea（名為su）和提交按鈕。提交表單後，我需要運行PHP腳本而不刷新/離開頁面“echo”或以某種方式在屏幕上打印返回我很確定這可以通過某種ajax請求來...
來自於 2023-10-23 19:05:06
0
1
285
JavaScript 允許存取 CSS 自訂屬性（也稱為 CSS 變數） 如何使用JavaScript（普通或jQuery）來取得和設定CSS自訂屬性（透過樣式表中的var(…)存取的屬性）？這是我不成功的嘗試：點擊按鈕會更改通常的font-weight...
來自於 2023-10-20 22:42:04
0
2
244
Vue 2 - 關於改變 props 的警告 我開始了https://laracasts.com/series/learning-vue-step-by-step系列。我因以下錯誤而停止了Vue、Laravel和AJAX課程：...
來自於 2023-10-13 10:49:44
0
2
217
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！