recherche

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
WBOYoriginal
2016-05-16 15:04:562507parcourir

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>

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;>

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.

Déclaration：
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
Article précédent：jQuery sélecteur de filtre de contenu apprentissage tutoriel_jqueryArticle suivant：jQuery sélecteur de filtre de contenu apprentissage tutoriel_jquery

Articles Liés

Voir plus