interface Web
Tutoriel H5
Téléchargement de fichiers sans actualisation à l'aide de PHP et HTML5 FormData
Téléchargement de fichiers sans actualisation à l'aide de PHP et HTML5 FormData
Cet article présente principalement le tutoriel d'utilisation de PHP et HTML5 FormData pour implémenter le téléchargement de fichiers sans actualisation. Cet article détaille d'abord les étapes d'écriture du programme, et donne enfin un exemple complet. Les amis qui en ont besoin peuvent s'y référer.
Aucun L'actualisation du téléchargement de fichiers est un problème courant et quelque peu compliqué. Une solution courante consiste à construire une iframe.
En HTML5, une API d'objet FormData est fournie. Grâce à FormData, une demande de formulaire peut être facilement construite et envoyée via XMLHttpRequest. Il est également possible d'envoyer des fichiers via l'objet FormData, donc le téléchargement sans actualisation devient très simple.
Alors comment utiliser FormData ? Script House en donnera une brève introduction ci-dessous.
1. Construire l'objet FormData
Pour obtenir un objet FormData, c'est très simple :
var fd = new FormData();
L'objet FormData ne fournit qu'une seule méthode append, qui est utilisée pour ajouter des paramètres de demande de formulaire à l'objet.
Dans les navigateurs grand public actuels, FormData peut être obtenu ou modifié des deux manières suivantes.
Méthode 1 : créez un objet FormData vide, puis utilisez la méthode append pour ajouter des paires clé-valeur une par une. Exemple :
var fd = new FormData();
fd.append("name", "脚本之家");
fd.append("blog", "http://jb51.net");
fd.append("file", document.getElementById("file"));Cette méthode ne nécessite pas l'existence d'objets de formulaire HTML.
Méthode 2 : Obtenez l'objet élément de formulaire et transmettez-le dans l'objet FormData en tant que paramètre. Exemple :
var formobj = document.getElementById("form");
var fd = new FormData(formobj);Bien sûr, vous pouvez également utiliser la méthode append pour continuer à ajouter d'autres paramètres à fd.
2. FormData envoie une requête
Maintenant que l'objet FormData est obtenu, comment envoyer une requête ? L'objet FormData est principalement utilisé dans la méthode d'envoi de l'objet XMLHttpRequest amélioré. Reportez-vous à l'exemple suivant :
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. Utilisation de FormData dans jquery
dans jQuery. ajax Dans la méthode, la méthode FormData peut également être utilisée pour réaliser un téléchargement sans actualisation. Mais faites attention aux réglages des paramètres, reportez-vous à ce qui suit :
$.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 接收表单提交信息并打印
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>Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas. utile à l'étude de chacun. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
HTML5 utilise DOM pour le contrôle personnalisé
Code HTML5 et CSS3 pour implémenter l'affichage 3D des informations sur le produit
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Configuration du projet CakePHP
Sep 10, 2024 pm 05:25 PM
Dans ce chapitre, nous comprendrons les variables d'environnement, la configuration générale, la configuration de la base de données et la configuration de la messagerie dans CakePHP.
Guide d'installation et de mise à niveau de PHP 8.4 pour Ubuntu et Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 apporte plusieurs nouvelles fonctionnalités, améliorations de sécurité et de performances avec une bonne quantité de dépréciations et de suppressions de fonctionnalités. Ce guide explique comment installer PHP 8.4 ou mettre à niveau vers PHP 8.4 sur Ubuntu, Debian ou leurs dérivés. Bien qu'il soit possible de compiler PHP à partir des sources, son installation à partir d'un référentiel APT comme expliqué ci-dessous est souvent plus rapide et plus sécurisée car ces référentiels fourniront les dernières corrections de bogues et mises à jour de sécurité à l'avenir.
Date et heure de CakePHP
Sep 10, 2024 pm 05:27 PM
Pour travailler avec la date et l'heure dans cakephp4, nous allons utiliser la classe FrozenTime disponible.
Téléchargement de fichiers CakePHP
Sep 10, 2024 pm 05:27 PM
Pour travailler sur le téléchargement de fichiers, nous allons utiliser l'assistant de formulaire. Voici un exemple de téléchargement de fichiers.
Routage CakePHP
Sep 10, 2024 pm 05:25 PM
Dans ce chapitre, nous allons apprendre les sujets suivants liés au routage ?
Discuter de CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP est un framework open source pour PHP. Il vise à faciliter grandement le développement, le déploiement et la maintenance d'applications. CakePHP est basé sur une architecture de type MVC à la fois puissante et facile à appréhender. Modèles, vues et contrôleurs gu
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Comment configurer Visual Studio Code (VS Code) pour le développement PHP
Dec 20, 2024 am 11:31 AM
Visual Studio Code, également connu sous le nom de VS Code, est un éditeur de code source gratuit – ou environnement de développement intégré (IDE) – disponible pour tous les principaux systèmes d'exploitation. Avec une large collection d'extensions pour de nombreux langages de programmation, VS Code peut être c
