communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Les versions natives JS et jQuery implémentent la fonction de téléchargement de fichiers_jquery

Les versions natives JS et jQuery implémentent la fonction de téléchargement de fichiers_jquery

WBOY
Libérer： 2016-05-16 15:04:56
original
2495 Les gens l'ont consulté

Cet article partage des exemples d'utilisation de la version native JS et de la version jQuery pour implémenter la fonction de téléchargement de fichiers pour votre référence. Le contenu spécifique est le suivant
. 

<!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 是表单数据类 */
 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>
Copier après la connexion

code php : 

<&#63;php
if (isset($_POST['upload'])) { 
var_dump($_FILES);
move_uploaded_file($_FILES['upfile']['tmp_name'], 'up_tmp/'.time().'.dat');
//header('location: test.php');
exit;
}
&#63;>
Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：
JS文件上传 jQuery文件上传
source：php.cn
Article précédent：jQuery sélecteur de filtre de contenu apprentissage tutoriel_jquery Article suivant：js cliquez sur Retour pour accéder à la page spécifiée. compétences de mise en œuvre process_javascript
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
Derniers articles par auteur
Derniers numéros
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Comparez Imagick, Adobe Photoshop et Windows - Détecter la résolution (pixels par centimètre ou pixels par pouce) Ce n'est pas une question mais une tentative d'améliorer ma compréhension de la façon dont...
Depuis 2024-04-06 16:01:27
0
1
397
Vite/Vue 3 : "Exigence non définie" lors de l'utilisation de la source d'image comme accessoire Je suis passé de VueCLI à ViteCLI et de CompositionAPI de Vue3 à SFCScriptsetupAPI. Commen...
Depuis 2024-04-06 09:50:25
0
1
353
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Transmettre la valeur de courrier électronique du modèle V à la méthode Bonjour, j'essaie de passer v-model sur l'entrée pour essayer d'envoyer l'e-mail pour réin...
Depuis 2024-04-05 10:04:40
0
1
405
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal