ajax上傳文件原理
❶ APICloud 社區api.ajax介面多個文件上傳怎麼傳參
通過post請求上傳，有兩種方式，跟form表單通過file標簽提交文件是一樣的。
1、一種是鍵值對的方式，也就是一個name對應一個file：
api.ajax({
url: 'http://host/upLoad',
method: 'post',
report:true,//回調上傳進度
data: {
files: {
file1: '/sdcard/a.png',
file2: '/sdcard/b.png',
file3: '/sdcard/信搭c.png',
}
}
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret));
} else {
console.log(JSON.stringify(err));
}
});
2、另外一種是上傳文件數組，這種方式你的游坦畢伺服器要配合做特殊的處理進行支持：
api.ajax({
url: 'http://host/upLoad',
method: 'post',
report:true,/神芹/回調上傳進度
data: {
files: {
images: ['/sdcard/a.png', '/sdcard/b.png', '/sdcard/c.png']
}
}
}, function(ret, err) {
if (ret) {
console.log(JSON.stringify(ret));
} else {
console.log(JSON.stringify(err));
}
});
❷ ajax怎麼提交帶文件上傳表單
上傳的文件是沒有辦法和表單內容一起非同步的，可考慮使用jquery的ajaxfileupload,或是其他的插件，非同步上傳文件後，然後再對表單進行操作。
❸ 如何使用ajax實現文件上傳
使用 Ajax 實現文件上傳的主要步驟如下：
1. 創建 HTML 表單：設置包含文件選擇器和提交按鈕的表單。
2. 引入 AJAX 庫：為簡化操作，通常會引入 jQuery 或者 Axios 庫。
3. 編寫 AJAX 代碼：使用 XMLHttpRequest 或者庫函數發起文件上傳請求。
4. 配置請求：設置請求類型（POST 或者 PUT）、伺服器端點和請求頭。請求頭需要包含用於處理文件上傳的參數，如 Content-Type 和邊界參數。
5. 發送文件：將文件作為二進制數據發送到伺服器。
6. 處理伺服器響應：接收伺服器返回的數據，進行相應的操作，如顯示上傳結果或錯誤信息。
以下是使用 jQuery 的 Ajax 上傳文件的簡化代碼示例：
HTML 表單：
上傳文件
javaScript 代碼：
javascript
$(document).ready(function () {
$("#fileUploadForm").submit(function (event) {
event.preventDefault();
var formData = new FormData();
formData.append("file", $("#fileInput")[0].files[0]);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (response) {
console.log(response);
// 處理伺服器響應，顯示上傳結果或錯誤信息
},
error: function () {
console.log("上傳失敗");
// 處理上傳失敗情況
},
});
});
});
在這個示例中，我們使用 jQuery 的 `ajax` 函數發起文件上傳請求，並將文件作為 FormData 對象的一部分發送到伺服器端點 "upload.php"。伺服器端需要配置為接收並處理文件上傳。
通過以上步驟和示例代碼，你可以實現使用 Ajax 來上傳文件的功能。根據具體需求和伺服器端實現，可能還需要進行額外的配置和操作。
❹ ajax怎樣提交form表單與實現文件上傳
Ajax 提交form方式可以將form表單序列化 然後將數據通過data提交至後台，例如：
❺ 如何用Ajax實現多文件上傳
jquery 實現多個上傳文件教程：
首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等):
1
2
3
4
5
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、頁面的基本代碼如下
這里用的是aspx頁面(html也是也可的)
頁面中引入的js和js函數如下：
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
</script>
js函數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'image/uploadify.swf', //uploadify.swf文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框
'script': 'Handler1.ashx',// script ： 後台處理程序的相對路徑
'cancelImg': 'image/cancel.png',
'buttenText': '請選擇文件',//瀏覽按鈕的文本，默認值：BROWSE。
'sizeLimit':999999999,//文件大小顯示
'floder': 'Uploader',//上傳文件存放的目錄
'queueID': 'fileQueue',//文件隊列的ID，該ID與存放文件隊列的div的ID一致
'queueSizeLimit': 120,//上傳文件個數限制
'progressData': 'speed',//上傳速度顯示
'auto': false,//是否自動上傳
'multi': true,//是否多文件上傳
//'onSelect': function (e, queueId, fileObj) {
// alert("唯一標識:" + queueId + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +
// "文件大小：" + fileObj.size + "\r\n" +
// "創建時間：" + fileObj.creationDate + "\r\n" +
// "最後修改時間：" + fileObj.modificationDate + "\r\n" +
// "文件類型：" + fileObj.type);
// }
'onQueueComplete': function (queueData) {
alert("文件上傳成功！");
return;
}
});
});
頁面中的控制項代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上傳" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
</body>
函數主要參數：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
$('#fileInput1').fileUpload({
'uploader': 'uploader.swf',//不多講了
'script': '/AjaxByJQuery/file.do',//處理Action
'cancelImg': 'cancel.png',
'folder': '',//服務端默認保存路徑
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request["arg1"]
'buttonText':'UpLoadFile',//按鈕顯示文字,不支持中文,解決方案見下
//'buttonImg':'圖片路徑',//通過設置背景圖片解決中文問題,就是把背景圖做成按鈕的樣子
'multi':'true',//多文件上傳開關
'fileExt':'*.xls;*.csv',//文件過濾器
'fileDesc':'.xls',//文件過濾器 詳解見文檔
'onComplete' : function(event,queueID,file,serverData,data){
//serverData為伺服器端返回的字元串值
alert(serverData);
}
});
});
後台一般處理文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;
namespace fupload
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile file = context.Request.Files["Filedata"];//對客戶端文件的訪問
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//伺服器端文件保存路徑
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//創建服務端文件夾
}
file.SaveAs(uploadPath + file.FileName);//保存文件
context.Response.Write("上傳成功");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
以上方式基本可以實現多文件的上傳，大文件大小是在控制在10M以下/。
❻ PHP 用AJAX 做多文件上傳
比較推薦使用swfupload上傳代碼，它是把swf和javascript結合起來，做成上傳代碼。功能應該是當前最豐富的。
它可以實現純粹html、javascrip難以逾越的功能：
(1)可以同時上傳多個文件；
(2)類似AJAX的無刷新上傳；
(3)可以顯示上傳進度；
(4)良好的瀏覽器兼容性；
目前QQ空間和博客網站，比較先進的圖片上傳也是基於swf和js代碼結合的做法。
關於swfupload，你可以詳細去網路上看，不重復了。
http://ke..com/view/1332553.htm
❼ 怎麼用ajax實現上傳文件的功能
HTTP File Server
http-file-server是用 python 實現的 HTTP 文件伺服器，支持上傳和下載文件。
運行
$ python file-server.py files 8001
其中第一個參數files是存放文件的路徑，第二個參數8001是 HTTP 伺服器埠。
介面
1. 讀取文件
GET /pathtofile/filename
2. 讀取文件夾下所有文件（已經忽略隱藏文件）
GET /path
返迴文件列表為JSON數組，文件名末尾帶有/的表示是文件夾。filename為文件名，mtime為修改時間。
[{"filename":"f1.txt","mtime":1001},{"filename":"p3/","mtime":1002}]
3. 上傳文件
採用POST方式上傳文件，URL參數中傳參數name表示上傳的文件名，POST內容為文件內容。
POST /upload?name=filename
ajax示例:
// file is a FileReader object
var data = file.readAsArrayBuffer();
var xhr = new XMLHttpRequest();
var url = "http://localhost:8001/upload?name=xxx.md";
xhr.open("post", url, true);
xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
xhr.onreadystatechange = function() {
if (xhr.readyState==4 && xhr.status==200)
{
console.log(xhr.responseText);
}
}
xhr.send(data);
文件名 filename 可以包含相對路徑。比如：upload?name=md/xxx.md。則上傳至md目錄下。