无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造 iframe 方式实现。
在 HTML5 中提供了一个 FormData 对象 API，通过 FormData 可以方便地构造一个表单请求，并通过 XMLHttpRequest 来发送。通过 FormData 对象发送文件也是可以的，如此则无刷新上传就变的非常简单了。
那么 FormData 怎么使用呢？下面脚本之家对此进行简单的介绍。
1. 构造 FormData 对象
想得到一个FormData对象，很简单：
var fd = new FormData();
FormData 对象只提供了一个方法 append ，用于向对象中添加表单请求参数。
在当前主流浏览器中，可通过如下两种方式获取或修改FormData。
方法一：创建一个空的FormData对象，然后再用append方法逐个添加键值对。示例：
var fd = new FormData();
fd.append("name", "脚本之家");
fd.append("blog", "http://php.net");
fd.append("file", document.getElementById("file"));
这种方法可以不需要 HTML 的表单对象存在。
方法二：取得form元素对象，将它作为参数传入FormData对象中。示例：
var formobj = document.getElementById("form");
var fd = new FormData(formobj);
当然，这里还可以使用 append 方法继续向 fd 中添加其他参数。
2. FormData 发送请求
得到 FormData 对象了，如何发送请求呢？ FormData 对象主要用于增强型的 XMLHttpRequest 对象的 send 方法中。参考如下示例：
var xhr = new XMLHttpRequest();
xhr.open("POST" ,"http://php.net" , true);
xhr.send(fd);
xhr.onload = function(e) {
if (this.status == 200) {
alert(this.responseText);
}
};
3. jquery 中使用 FormData
在 jQuery 的 ajax 方法中，也可使用 FormData 方式实现无刷新上传。但要注意参数的设置，参考如下：
$.ajax({
url: "http://php.net",
type: 'POST',
data: fd,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType:false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData:false
}).done(function(result){
console.log(result);
}).fail(function(err){
console.log(err);
});
4. 一个完整的示例（包含PHP处理示例）：
<?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST['do']) ){
var_dump($_REQUEST);
var_dump($_FILES);
die();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FormData Test - php.net</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form id="form">
<input type="file" name="file" id="file" />
<input type="text" name="name" id="" value="脚本之家" />
<input type="text" name="blog" id="" value="http://php.net" />
<input type="submit" name="do" id="do" value="submit" />
</form>
<script>
$("form").submit(function(e){
e.preventDefault();
//空对象然后添加
var fd = new FormData();
fd.append("name", "脚本之家");
fd.append("blog", "http://php.net");
fd.append("file", document.getElementById("file"));
//fd.append("file", $(":file")[0].files[0]); //jQuery 方式
fd.append("do", "submit");
//通过表单对象创建 FormData
var fd = new FormData(document.getElementById("form"));
//var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
//XMLHttpRequest 原生方式发送请求
var xhr = new XMLHttpRequest();
xhr.open("POST" ,"" , true);
xhr.send(fd);
xhr.onload = function(e) {
if (this.status == 200) {
alert(this.responseText);
};
};
return;
//jQuery 方式发送请求
$.ajax({
type:"post",
//url:"",
data: fd,
processData: false,
contentType: false
}).done(function(res){
console.log(res);
});
return false;
});
</script>
</body>
</html>
PHP対Python：違いを理解しますApr 11, 2025 am 12:15 AMPHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHPは、シンプルな構文と高い実行効率を備えたWeb開発に適しています。 2。Pythonは、簡潔な構文とリッチライブラリを備えたデータサイエンスと機械学習に適しています。
PHP：それは死にかけていますか、それとも単に適応していますか？Apr 11, 2025 am 12:13 AMPHPは死にかけていませんが、常に適応して進化しています。 1）PHPは、1994年以来、新しいテクノロジーの傾向に適応するために複数のバージョンの反復を受けています。 2）現在、電子商取引、コンテンツ管理システム、その他の分野で広く使用されています。 3）PHP8は、パフォーマンスと近代化を改善するために、JITコンパイラおよびその他の機能を導入します。 4）Opcacheを使用してPSR-12標準に従って、パフォーマンスとコードの品質を最適化します。
PHPの未来：適応と革新Apr 11, 2025 am 12:01 AMPHPの将来は、新しいテクノロジーの傾向に適応し、革新的な機能を導入することで達成されます。1）クラウドコンピューティング、コンテナ化、マイクロサービスアーキテクチャに適応し、DockerとKubernetesをサポートします。 2）パフォーマンスとデータ処理の効率を改善するために、JITコンパイラと列挙タイプを導入します。 3）パフォーマンスを継続的に最適化し、ベストプラクティスを促進します。
PHPの抽象クラスまたはインターフェイスに対して、いつ特性を使用しますか？Apr 10, 2025 am 09:39 AMPHPでは、特性は方法が必要な状況に適していますが、継承には適していません。 1）特性により、クラスの多重化方法が複数の継承の複雑さを回避できます。 2）特性を使用する場合、メソッドの競合に注意を払う必要があります。メソッドの競合は、代替およびキーワードとして解決できます。 3）パフォーマンスを最適化し、コードメンテナビリティを改善するために、特性の過剰使用を避け、その単一の責任を維持する必要があります。
依存関係噴射コンテナ（DIC）とは何ですか？また、なぜPHPで使用するのですか？Apr 10, 2025 am 09:38 AM依存関係噴射コンテナ（DIC）は、PHPプロジェクトで使用するオブジェクト依存関係を管理および提供するツールです。 DICの主な利点には、次のものが含まれます。1。デカップリング、コンポーネントの独立したもの、およびコードの保守とテストが簡単です。 2。柔軟性、依存関係を交換または変更しやすい。 3.テスト可能性、単体テストのために模擬オブジェクトを注入するのに便利です。
通常のPHPアレイと比較して、SPL SPLFIXEDARRAYとそのパフォーマンス特性を説明してください。Apr 10, 2025 am 09:37 AMSplfixedArrayは、PHPの固定サイズの配列であり、高性能と低いメモリの使用が必要なシナリオに適しています。 1）動的調整によって引き起こされるオーバーヘッドを回避するために、作成時にサイズを指定する必要があります。 2）C言語アレイに基づいて、メモリと高速アクセス速度を直接動作させます。 3）大規模なデータ処理とメモリに敏感な環境に適していますが、サイズが固定されているため、注意して使用する必要があります。
PHPは、ファイルを安全に処理する方法をどのように処理しますか？Apr 10, 2025 am 09:37 AMPHPは、$ \ _ファイル変数を介してファイルのアップロードを処理します。セキュリティを確保するための方法には次のものが含まれます。1。アップロードエラー、2。ファイルの種類とサイズを確認する、3。ファイル上書きを防ぐ、4。ファイルを永続的なストレージの場所に移動します。
Null Coulescingオペレーター（??）およびNull Coulescing Assignment Operator（?? =）とは何ですか？Apr 10, 2025 am 09:33 AMJavaScriptでは、nullcoalescingoperator（??）およびnullcoalescingsignmentoperator（?? =）を使用できます。 1.？？最初の非潜水金または非未定されたオペランドを返します。 2.？？これらの演算子は、コードロジックを簡素化し、読みやすさとパフォーマンスを向上させます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7455
15137552