<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="jquery-2.1.1.min.js"></script>
</head>

<body>
<p><input type="file" id="upfile"></p>
<p><input type="button" id="upJS" value="用原生JS上傳"></p>
<p><input type="button" id="upJQuery" value="用jQuery上傳"></p>
<script>
/*原生JS版*/
document.getElementById("upJS").onclick = function() {
 /* FormData 是表單數(shù)據(jù)類 */
 var fd = new FormData();
 var ajax = new XMLHttpRequest();
 fd.append("upload", 1);
 /* 把文件添加到表單里 */
 fd.append("upfile", document.getElementById("upfile").files[0]);
 ajax.open("post", "test.php", true);

 ajax.onload = function () {
 console.log(ajax.responseText);
 };

 ajax.send(fd);
 
}

/* jQuery 版 */
$('#upJQuery').on('click', function() {
 var fd = new FormData();
 fd.append("upload", 1);
 fd.append("upfile", $("#upfile").get(0).files[0]);
 $.ajax({
 url: "test.php",
 type: "POST",
 processData: false,
 contentType: false,
 data: fd,
 success: function(d) {
 console.log(d);
 }
 });
});
</script>
</body>
</html>

php代碼：

<?php
if (isset($_POST['upload'])) { 
var_dump($_FILES);
move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
//header('location: test.php');
exit;
}
?>

更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery結(jié)合html實(shí)現(xiàn)中英文頁(yè)面切換
這篇文章主要為大家詳細(xì)介紹了jquery結(jié)合html實(shí)現(xiàn)中英文頁(yè)面切換,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
jQuery實(shí)用技巧必備（下）
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開發(fā)，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery Ajax頁(yè)面局部加載方法匯總
jquery中實(shí)現(xiàn)ajax價(jià)值的方法有很多種，下面小編給大家介紹了jQuery Ajax頁(yè)面局部加載方法匯總，非常實(shí)用具有參考借鑒價(jià)值，感謝的朋友一起看下吧
2016-06-06
Jquery注冊(cè)事件實(shí)現(xiàn)方法
這篇文章主要介紹了Jquery注冊(cè)事件實(shí)現(xiàn)方法,以實(shí)例形式分析了jQuery實(shí)現(xiàn)按鈕注冊(cè)鼠標(biāo)事件的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-05-05
jquery tagname 取得方法
jquery tagname 獲得方法
2009-06-06
jQuery.Form上傳文件操作
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧
2017-02-02
jQuery針對(duì)各類元素操作基礎(chǔ)教程
這篇文章主要介紹了jQuery針對(duì)各類元素操作基礎(chǔ),包括jQuery基礎(chǔ)操作、選擇要操作的元素及處理DOM元素等,是深入學(xué)習(xí)jQuery所必備的基礎(chǔ)技能,需要的朋友可以參考下
2014-08-08
jQuery建立一個(gè)按字母順序排列的友好頁(yè)面索引(兼容IE6/7/8)
很多人熟悉使用錨鏈接跳轉(zhuǎn)到的頁(yè)面部分的解決方案,這種效果當(dāng)需要列出很長(zhǎng)的數(shù)據(jù)集時(shí)，是非常實(shí)用的,然而頁(yè)面跳轉(zhuǎn)對(duì)于游客來(lái)說(shuō)有時(shí)候并不是好友好，弊端我就不多說(shuō)了，祥看下本文
2013-02-02
jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法,實(shí)例分析了jQuery通過(guò)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素切換的動(dòng)畫效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實(shí)用，也很簡(jiǎn)單，使用到了一個(gè)resize事件需要的朋友可以參考下
2014-10-10