Maison développement back-end tutoriel php Explication détaillée du téléchargement de fichiers à l'aide de jQuery Ajax

Explication détaillée du téléchargement de fichiers à l'aide de jQuery Ajax

Jan 12, 2018 pm 05:12 PM
ajax jquery 文件

本文主要介绍了jQuery Ajax方式上传文件的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。

jQuery 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>
Copier après la connexion

很简洁的代码,便可以达到Ajax方式上传文件,上面的代码中使用这种传统的选择文件的方法产生文件对象,HTML5还支持使用多种更灵活的方式,如拖拽文件到指定的元素上产生。

Ajax已成功上传文件,但这时我们会想到一个问题,如何显示进度条?带着这个问题,脑子会想到,Flash? 浏览器插件?。

NO,现在不需要这些东西了。

开始着手,先做一个进度条,进度条也很简单,使用HTML5 新加的标签:

<progress id="progressBar" value="0" max="100"> </progress>
Copier après la connexion

这个在浏览器中便会呈现了一个进度条,现在我们要做的就是在上传的时候,实时的去改变它的Value值,然后进度显示的问题便交给它了。

我们的服务器端无需修改,只需要在JS中XHR对象加一个事件。

xhr.upload.addEventListener("progress", progressFunction, false)
Copier après la connexion

progressFunction 被调用的时候会传进一个事件对象,这个对象有两个属性,一个就是loaded 一个是total ,分别代表,已上传的值,和总要上传的值。

这正是我们需要的,所以这个方法,可以这样写:

function progressFunction(evt) {
   var progressBar = document.getElementByIdx_x_x("progressBar");
   if (evt.lengthComputable) {
    progressBar.max = evt.total;  
    progressBar.value = evt.loaded;
   }
  }
Copier après la connexion

这样便可以完成,上传进度显示了。

如下针对上面的第一个示例代码,做一个调整:

示例代码2,带进度显示:




 Html5 Ajax 上传文件
 


 
 
 
 
   
Copier après la connexion

 后台接收文件的程序可以是任何语言(C#,PHP,Python 等)编写的,上述例子使用C#

很简单,无需为这个进度条做任何改动。

var flist = Request.Files;
   for (int i = 0; i < flist.Count; i++)
   {
    string FilePath = "E:\\hooyes\\Files\\";
    var c = flist[i];
    FilePath = Path.Combine(FilePath, c.FileName);
    c.SaveAs(FilePath);
   }
Copier après la connexion

相关推荐:

jQuery Form实现Ajax上传文件同时设置headers详解

jquery和iframe做一个ajax上传效果实例分享

Ajax上传图片及先预览功能的实现方法

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que faire si le code d'erreur 0x80004005 apparaît. L'éditeur vous apprendra comment résoudre le code d'erreur 0x80004005. Que faire si le code d'erreur 0x80004005 apparaît. L'éditeur vous apprendra comment résoudre le code d'erreur 0x80004005. Mar 21, 2024 pm 09:17 PM

Lors de la suppression ou de la décompression d'un dossier sur votre ordinateur, une boîte de dialogue d'invite « Erreur 0x80004005 : erreur non spécifiée » apparaît parfois. Comment devez-vous résoudre cette situation ? Il existe en fait de nombreuses raisons pour lesquelles le code d'erreur 0x80004005 est demandé, mais la plupart d'entre elles sont causées par des virus. Nous pouvons réenregistrer la DLL pour résoudre le problème. Ci-dessous, l'éditeur vous expliquera l'expérience de gestion du code d'erreur 0x80004005. . Certains utilisateurs reçoivent le code d'erreur 0X80004005 lors de l'utilisation de leur ordinateur. L'erreur 0x80004005 est principalement due au fait que l'ordinateur n'enregistre pas correctement certains fichiers de bibliothèque de liens dynamiques ou à un pare-feu qui n'autorise pas les connexions HTTPS entre l'ordinateur et Internet. Alors que diriez-vous

Comment transférer des fichiers de Quark Cloud Disk vers Baidu Cloud Disk ? Comment transférer des fichiers de Quark Cloud Disk vers Baidu Cloud Disk ? Mar 14, 2024 pm 02:07 PM

Quark Netdisk et Baidu Netdisk sont actuellement les logiciels Netdisk les plus couramment utilisés pour stocker des fichiers. Si vous souhaitez enregistrer les fichiers de Quark Netdisk sur Baidu Netdisk, comment procéder ? Dans ce numéro, l'éditeur a compilé les étapes du didacticiel pour transférer des fichiers d'un ordinateur Quark Network Disk vers Baidu Network Disk. Voyons comment le faire fonctionner. Comment enregistrer les fichiers du disque réseau Quark sur le disque réseau Baidu ? Pour transférer des fichiers de Quark Network Disk vers Baidu Network Disk, vous devez d'abord télécharger les fichiers requis depuis Quark Network Disk, puis sélectionner le dossier cible dans le client Baidu Network Disk et l'ouvrir. Ensuite, faites glisser et déposez les fichiers téléchargés depuis Quark Cloud Disk dans le dossier ouvert par le client Baidu Cloud Disk, ou utilisez la fonction de téléchargement pour ajouter les fichiers sur Baidu Cloud Disk. Assurez-vous de vérifier si le fichier a été transféré avec succès dans Baidu Cloud Disk une fois le téléchargement terminé. C'est ça

Qu'est-ce que le fichier hiberfil.sys ? hiberfil.sys peut-il être supprimé ? Qu'est-ce que le fichier hiberfil.sys ? hiberfil.sys peut-il être supprimé ? Mar 15, 2024 am 09:49 AM

Récemment, de nombreux internautes ont demandé à l'éditeur : quel est le fichier hiberfil.sys ? hiberfil.sys peut-il occuper beaucoup d’espace sur le disque C et être supprimé ? L'éditeur peut vous indiquer que le fichier hiberfil.sys peut être supprimé. Jetons un coup d'œil aux détails ci-dessous. hiberfil.sys est un fichier caché dans le système Windows et également un fichier d'hibernation du système. Il est généralement stocké dans le répertoire racine du lecteur C et sa taille est équivalente à la taille de la mémoire installée du système. Ce fichier est utilisé lorsque l'ordinateur est en veille prolongée et contient les données de mémoire du système actuel afin qu'il puisse être rapidement restauré à son état précédent lors de la récupération. Étant donné que sa taille est égale à la capacité de la mémoire, il peut occuper une plus grande quantité d’espace sur le disque dur. hiberner

Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées Mar 15, 2024 am 08:00 AM

Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées MySQL est un système de gestion de base de données relationnelle populaire, et les données de la base de données sont stockées dans différents fichiers. Parmi eux, le fichier .ibd est un fichier de données du moteur de stockage InnoDB, utilisé pour stocker des données et des index dans des tables. Cet article fournira une analyse détaillée du rôle du fichier .ibd dans MySQL et fournira des exemples de code pertinents pour aider les lecteurs à mieux comprendre. 1. Le rôle des fichiers .ibd : stockage des données : les fichiers .ibd sont du stockage InnoDB

Explication détaillée de la commande d'affichage des journaux dans le système Linux ! Explication détaillée de la commande d'affichage des journaux dans le système Linux ! Mar 06, 2024 pm 03:55 PM

Sur les systèmes Linux, vous pouvez utiliser la commande suivante pour afficher le contenu du fichier journal : Commande tail : La commande tail est utilisée pour afficher le contenu à la fin du fichier journal. Il s'agit d'une commande courante pour afficher les dernières informations du journal. tail [option] [nom du fichier] Les options couramment utilisées incluent : -n : Spécifiez le nombre de lignes à afficher, la valeur par défaut est de 10 lignes. -f : Surveillez le contenu du fichier en temps réel et affichez automatiquement le nouveau contenu lorsque le fichier est mis à jour. Exemple : tail-n20logfile.txt#Afficher les 20 dernières lignes du fichier logfile.txt tail-flogfile.txt#Surveiller le contenu mis à jour du fichier logfile.txt en temps réel Commande head : La commande head permet d'afficher le début du fichier journal

Créer et exécuter des fichiers Linux '.a' Créer et exécuter des fichiers Linux '.a' Mar 20, 2024 pm 04:46 PM

Travailler avec des fichiers dans le système d'exploitation Linux nécessite l'utilisation de diverses commandes et techniques qui permettent aux développeurs de créer et d'exécuter efficacement des fichiers, du code, des programmes, des scripts et d'autres éléments. Dans l'environnement Linux, les fichiers portant l'extension « .a » sont d'une grande importance en tant que bibliothèques statiques. Ces bibliothèques jouent un rôle important dans le développement de logiciels, permettant aux développeurs de gérer et de partager efficacement des fonctionnalités communes sur plusieurs programmes. Pour un développement logiciel efficace dans un environnement Linux, il est crucial de comprendre comment créer et exécuter des fichiers « .a ». Cet article explique comment installer et configurer de manière complète le fichier Linux « .a ». Explorons la définition, l'objectif, la structure et les méthodes de création et d'exécution du fichier Linux « .a ». Qu'est-ce que L

PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique Jun 02, 2024 pm 08:39 PM

Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.

Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Mar 09, 2024 pm 05:36 PM

L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :

See all articles