html5ajax上傳文件
㈠ 如何用ajax上傳文件
用到兩個對象
第一個對象：FormData
第二個對象：XMLHttpRequest
目前新版的Firefox 與 Chrome 等支持HTML5的瀏覽器完美的支持這兩個對象，但IE9尚未支持 FormData 對象，還在用IE6 ? 只能仰天長嘆....
有了這兩個對象，我們可以真正的實現Ajax方式上傳文件。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上傳文件</title>
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementByIdx_x_x("file").files[0]; // 獲取文件對象
var FileController = "../file/save"; // 接收上傳文件的後台地址
// FormData 對象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表單數據
form.append("file", fileObj); // 文件對象
// XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
alert("上傳完成!");
};
xhr.send(form);
}
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上傳" />
</body>
</html>
很簡潔的代碼，便可以達到Ajax方式上傳文件，上面的代碼中使用<input type="file" />這種傳統的選擇文件的方法產生文件對象，HTML5還支持使用多種更靈活的方式，如拖拽文件到指定的元素上產生。
㈡ html5+websocket上傳文件問題
websocket目前只支持文本，不支持二進制數據。上傳多個文件，用 <input type="file"> 結合 ajax 的 POST 足夠了
㈢ 基於HTML5的多圖Ajax上傳的php後台接收並獲取圖片寬高等信息
//但是為什麼我用file_exists()判斷文件是否存在時，得到的結果卻是不存在呢
這句話後面加一句
$file='../uploads/' . $file;
你都把文件存成這個文件了 還用原來的文件名判斷能行嗎
後面的錯誤也是一樣的
也可以直接把後面兩個$file改掉
if(!file_exists('../uploads/' . $file)){
$src_info = @getimagesize('../uploads/' . $file);
㈣ 如何實現HTML5文件斷點續傳
實現HTML5文件斷點續傳
一、實現文件多選
HTML5的<input>新增了"multiple"屬性，該屬性可接受多個值的文件上傳欄位
<input type="file" multiple="multiple" name="file" id="file">
添加了該屬性用戶就可以在彈出的對話框中一次性選擇多個文件了
二、實現文件從計算機拖拽到網頁以及添加文件隊列功能
這里我們用 dragover 和 drop 兩個事件來管理文件拖拽的功能
其中 dragover 用來處理在指定的元素上移動時的事件，這里我們通過給body綁定dragover時間來處理頁面中拖動文件的事件
document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = '';
}
用 drop 事件來處理滑鼠松開時候的事件，此時應該將用戶拖動過來的文件加入到上傳隊列中，以供後續的處理
document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files屬性可以獲取到所有拖動選擇的文件，通過遍歷可以讀取到所有文件的信息。
// 遍歷每個文件可以獲取到文件的 name、size、type、lastModifiedDate等關鍵信息
var files = evt.dataTransfer.files;
// addfile 方法 用來添加上傳文件隊列，在input的change事件中也需要調用
// 該方法首先檢查有無文件正在上傳中，如果有就將後續加入的文件放到上傳隊列中，如果沒有文件正在上傳就直接執行上傳命令
addfile(files);
}
三、文件續傳原理
目前比較常用的斷點續傳的方法有兩種，一種是通過websocket介面進行文件上傳，另一種是通過ajax，兩種方法各有千秋，雖然websocket聽起來比較高端些~ 但是除了用了不同的協議外其他的演算法基本上都是很相似的，並且服務端要開啟ws介面，這里用相對方便的ajax來說明斷點上傳的思路。
說來說去，斷點續傳最核心的內容就是把文件「切片」然後再一片一片的傳給伺服器，但是這看似簡單的上傳過程卻有著無數的坑。
首先是文件的識別，一個文件被分成了若干份之後如何告訴伺服器你切了多少塊，以及最終伺服器應該如何把你上傳上去的文件進行合並，這都是要考慮的。
因此在文件開始上傳之前，我們和伺服器要有一個「握手」的過程，告訴伺服器文件信息，然後和伺服器約定切片的大小，當和伺服器達成共識之後就可以開始後續的文件傳輸了。
前台要把每一塊的文件傳給後台，成功之後前端和後端都要標識一下，以便後續的斷點。
當文件傳輸中斷之後用戶再次選擇文件就可以通過標識來判斷文件是否已經上傳了一部分，如果是的話，那麼我們可以接著上次的進度繼續傳文件，以達到續傳的功能。
四、文件的前端切片
有了HTML5 的 File api之後切割文件比想想的要簡單的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
參數start是開始切片的位置，end是切片結束的位置 單位都是位元組。通過控制start和end 就可以是實現文件的分塊
如
file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上傳
上一部我們通過slice方法把文件分成了若干塊，接下來要做的事情就是把這些碎片傳到伺服器上。
這里我們用ajax的post請求來實現
textpop-up
var xhr = new XMLHttpRequest();
var url = xxx // 文件上傳的地址 可以包括文件的參數 如文件名稱 分塊數等以便後台處理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判斷文件是否上傳成功，如果成功繼續上傳下一塊，如果失敗重試該快
}
xhr.upload.onprogress = function(e){
// 選用 如果文件分塊大小較大 可以通過該方法判斷單片文件具體的上傳進度
// e.loaded 該片文件上傳了多少
// e.totalSize 該片文件的總共大小
}
xhr.send(packet);
㈤ 前端上傳文件的幾種方法
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
form表單上傳
表單上傳需要注意以下幾點：
(1).提供form表單，method必須是post。
(2).form表單的enctype必須是multipart/form-data。
javascript學習交流群：453833554
enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到伺服器之前，所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值：
application/x-www-form-urlencoded：在發送前編碼所有字元(默認)(空格被編碼為』+』，特殊字元被編碼為ASCII十六進制字元)。
multipart/form-data：不對字元編碼。在使用包含文件上傳控制項的表單時，必須使用該值。
text/plain：空格轉換為 「+」 加號，但不對特殊字元編碼。
默認enctype=application/x-www-form-urlencoded，所以表單的內容會按URL規則編碼，然後根據表單的提交方法：
method=』get』 編碼後的表單內容附加在請求連接後，
method=』post』 編碼後的表單內容作為post請求的正文內容。
㈥ jquery html5怎樣把文件上傳到文件夾
樓主你好！根據你的描述，讓我來給你回答！
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
});
希望能幫到你，如果滿意，請記得採納哦~~~
㈦ ajax 不能傳輸圖片數據嗎
ajax不是新技術，是多種技術的雜種，iframe，flash都可以上傳文件，所以說，ajax是可以上傳文件滴！
㈧ jquery升級後,上傳的文件無效
升級後文件類型不匹配，無法上傳。
在 IE8/9 中使用 JQuery 上傳只能使用 Form 的方式。
使用 JQuery.Ajax 無法上傳文件（因為無法使用 FormData，FormData 是 HTML5 的一個特性，IE8/9 不支持）
使用 JQuery Form 上傳，contentType 只能為 text/html，因為如果是 application/json 類型，IE8/9 會以文件下載的方式展現 json 數據。
㈨ 哪個javascript框架支持ajax方式的文件上傳
7款基於JavaScript和AJAX的文件上傳插件，這些插件基本上都能實現以下功能：
多文件上傳，拖拽操作，實時上傳進度，自定義上傳限制
1. jQuery File Upload
具有多文件上傳、拖拽、進度條和圖像預覽功能的文件上傳插件，支持跨域、分塊、暫停恢復和客戶端圖像縮放。可與任何服務端平台（如PHP、Python、Ruby on Rails、Java、Node.js、Go等）一起使用，支持標準的HTML表單文件上傳。
2. Pixelcone Fileuploader
使用HTML5 API的jQuery文件上傳插件，支持AJAX上傳和拖拽操作，以及針對老版本瀏覽器的iframe上傳部件。有多種形式來實現多文件上傳，每種形式由單一的上傳腳本來控制。
3. Ajax Upload
該插件使用XHR來上傳多個文件，支持拖拽操作，可以在FF3.6+、Safari4+、Chrome等瀏覽器中完美運行。
4. Plupload
這是一個針對CMS或類似系統的、高度可用的上傳插件。支持分塊、拖拽、圖像縮放、限制文件大小、顯示上傳進度等。
5. Uploadify
Uploadify是一個jQuery插件，幫助你在網站中輕松添加多文件上傳功能，提供了兩個版本（HTML5、Flash）。支持多文件上傳、拖拽、實時進度顯示，提供了大量的定製功能。
6. Ajax File Upload
該插件是Ajaxupload插件的修改版本，不具備HTML5功能。
7. jQuery FileDrop
該插件使用HTML5 API，允許用戶從桌面拖動多個文件到瀏覽器中，並上傳每個文件到用戶指定的URL。該插件使用HTML5 FileReader()來讀取文件數據。
㈩ 你好，構造FormData 上傳文件（用html5分塊了的）用ajax提交數據（不用jquery），伺服器端怎麼讀取數據啊
AJAX上傳的是POST方式，記得加上multipart/form-data