使用PHP和HTML5 FormData实现无刷新文件上传教程，
使用PHP和HTML5 FormData实现无刷新文件上传教程，
无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造 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://jb51.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://jb51.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://jb51.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 - jb51.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://jb51.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://jb51.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>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
session_start () 함수의 중요성은 무엇입니까?
May 03, 2025 am 12:18 AM
session_start () iscrucialinphpformanagingUsersessions.1) itiniteSanewsessionifnoneexists, 2) ResumesAnxistessions, and3) setSasessionCookieForContInuityAcrosrequests, enablingplicationsirecationSerauthenticationAndpersonalizestContent.
데이터 처리 및 계산에 MySQL 기능을 사용하는 방법
Apr 29, 2025 pm 04:21 PM
MySQL 기능은 데이터 처리 및 계산에 사용될 수 있습니다. 1. 기본 사용에는 문자열 처리, 날짜 계산 및 수학 연산이 포함됩니다. 2. 고급 사용에는 복잡한 작업을 구현하기 위해 여러 기능을 결합하는 것이 포함됩니다. 3. 성능 최적화를 위해서는 WHERE 절에서 기능 사용 및 GroupBy 및 임시 테이블 사용을 피해야합니다.
작곡가 : PHP 개발자의 패키지 관리자
May 02, 2025 am 12:23 AM
Composer는 PHP의 종속성 관리 도구이며 Composer.json 파일을 통해 프로젝트 종속성을 관리합니다. 1) 종속성 정보를 얻기 위해 Composer.json을 구문 분석합니다. 2) 종속성 트리를 형성하기위한 종속성; 3) Packagist에서 공급 업체 디렉토리로 종속성을 다운로드하여 설치합니다. 4) Composer.Lock 파일을 생성하여 팀 일관성 및 프로젝트 유지 관리 가능성을 보장하기 위해 종속성 버전을 잠그십시오.
MySQL의 문자 세트 및 Collation 규칙을 구성하는 방법
Apr 29, 2025 pm 04:06 PM
MySQL에서 문자 세트 및 콜라주를 구성하는 방법은 다음과 같습니다. 1. 서버 수준에서 문자 세트 및 콜라주 설정 : setNames'Utf8 '; setcharactersetutf8; setCollation_connection = 'utf8_general_ci'; 2. 특정 문자 세트 및 콜라주를 사용하는 데이터베이스를 만듭니다. createAbaseexample_DBCHARACTERSETUTF8COLLATEUTF8_GENERAL_CI; 3. 테이블을 만들 때 문자 세트 및 콜라주를 지정하십시오 : CreateTableAmplipt_table (idint
MySQL에서 데이터베이스 이름을 바꾸는 방법
Apr 29, 2025 pm 04:00 PM
MySQL에서 데이터베이스를 바꾸려면 간접적 인 방법이 필요합니다. 단계는 다음과 같습니다. 1. 새 데이터베이스를 만듭니다. 2. mysqldump를 사용하여 이전 데이터베이스를 내보내십시오. 3. 데이터를 새 데이터베이스로 가져옵니다. 4. 이전 데이터베이스를 삭제합니다.
작곡가의 목적 : PHP의 프로젝트 종속성 관리
Apr 30, 2025 am 12:01 AM
작곡가는 PHP 프로젝트의 종속성을 효과적으로 관리하고 버전 충돌 및 수동 라이브러리 관리의 번거 로움을 피할 수 있으므로 작곡가가 필요합니다. Composer는 Composer.json을 통해 종속성을 선언하고 Composer.Lock을 사용하여 버전 일관성을 보장하고 종속성 관리 프로세스를 단순화하며 프로젝트 안정성 및 개발 효율성을 향상시킵니다.
HTML 요소의 회전 효과를 설정하는 방법
Apr 30, 2025 pm 02:42 PM
HTML에서 요소의 회전 효과를 설정하는 방법은 무엇입니까? CSS 및 JavaScript를 사용하여 달성 할 수 있습니다. 1. CSS의 변환 속성은 회전 (45deg)과 같은 정적 회전에 사용됩니다. 2. JavaScript는 변환 속성을 변경하여 구현되는 회전을 동적으로 제어 할 수 있습니다.
PHP 성능 최적화 전략.
May 13, 2025 am 12:06 AM
phPapplicationSCanBeoptimizedForsPeedandefficiencyby : 1) ENABLEOPCACHEINPHP.INI, 2) PREPAREDSTATEMENTSWITHPDOFORDATABASEQUERIES 사용
