Le terminal mobile HTML5 réalise la production de fichiers upload_HTML/Xhtml_Web page

La plupart des fichiers téléchargés côté PC utilisent des plug-ins. Peu importe si vous introduisez Flash. Cependant, si le côté mobile utilise toujours divers plug-ins redondants, il sera probablement détruit. avoir la fonction de télécharger des images, puisque H5 a déjà des interfaces associées et que la compatibilité est bonne, bien sûr, la priorité est donnée à l'utilisation de H5 pour la mise en œuvre.

Les principales technologies utilisées sont :

ajax

FileReader

FormulaireDonnées

Structure HTML :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div class="zone de la caméra"> 
2.  <form enctype="multipart/ form-data" méthode="post">
3.  <entrée type="fichier" nom="fileToUpload" class="fileToUpload" accepter="image/*" capture="caméra"/>
4.  <div class="upload- progrès"><span>span>div>
5. formulaire>
6.  <div classe="pouce" >div>
7. div>

Le fichier upload.js packagé dépend de zepto

Code JavaScriptCopier le contenu dans le presse-papiers

1. (fonction($) {   
2.   $.extend($.fn, {   
3.     fileUpload : fonction(opts) {   
4.       ce.each(fonction() {   
5.         var $self = $(ce);   
6.         var doms = {   
7.           "fileToUpload" : $self.find(".fileToUpload"),   
8.           "pouce" : $self.find(".thumb"),   
9.           "progress" : $self.find(".upload-progress")   
10.         } ;   
11.         var funs = {   
12.           //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件   
13.           "fileSelected" : fonction() {   
14.             var files = (doms.fileToUpload)[0].files;   
15.             var count = files.length;   
16.             pour (var index = 0; index < count; index ) {   
17.               var file = files[index];   
18.               var fileSize = 0;   
19.               if (file.size > 1024 * 1024)   
20.                 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString()   'MB';   
21.               autre  
22.                 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString()   'KB';   
23.              }
24. funs.uploadFile();
25. },
26.  //Télécharger des fichiers de manière asynchrone
27. uploadFile : fonction() {
28.  var fd = new FormData();//Créer un objet de données de formulaire
29. var files = (doms.fileToUpload)[0].files;
30. var count = files.length
31.  pour (var index = 0; index < count; index ) {
32. var fichier = fichiers[index];
33. fd.append(opts.file, file);//Ajouter le fichier aux données du formulaire
34. funs.previewImage(file);//Prévisualisez l'image avant de la télécharger, ou prévisualisez le txt via d'autres méthodes
35.                                                           
36. var xhr = nouveau XMLHttpRequest(); xhr.upload.addEventListener(
"progress"
37. , funs.uploadProgress, false); // Surveiller la progression du téléchargement xhr.addEventListener(
"load"
38. , funs.uploadComplete, false <🎜); > xhr.addEventListener("erreur"
39. , opts.uploadFailed, false <🎜); > xhr.open("POST"
, opts.url);
40. xhr.send(fd);
},
41. //Aperçu du fichier
42. aperçuImage : fonction(fichier) {
43. var galerie = doms.thumb;
44. var img = document.createElement("img"
);
45. img.file = fichier;
46. doms.thumb.html(img);
47.  //Utilisez la méthode FileReader pour afficher le contenu de l'image
48. var reader = nouveau FileReader();
49. reader.onload = (fonction(aImg) {
50. retour fonction(e) {
51. aImg.src = e.target.result
52.                                            
})(img);
reader.readAsDataURL(fichier);
},
uploadProgress :
56. fonction(evt) {
57. si (evt.lengthComputable) {
58. var percentComplete = Math.round(evt.loaded * 100 / evt.total); doms.progress.html(percentComplete.toString()
'%'
59. );                                                           
},
61. "uploadComplete"
 :
62. fonction(evt) { alerte(evt.target.responseText)
                                                        
63. };
64. doms.fileToUpload.on("change", function() {
65. doms.progress.find("span").width("0" <🎜); >
66. funs.fileSelected();
67. });
68. });
69. }
70. });
71. })(Zepto);

Méthode d'appel :

Code JavaScriptCopier le contenu dans le presse-papiers

1. $(".camera-area").fileUpload({
2.  "url" : "savetofile.php", 
3.  "fichier" : "monFichier"
4. });

Partie PHP :

Code PHPCopier le contenu dans le presse-papiers

2. if (isset($_FILES['monFichier'])) {
3. // Exemple :
4. writeLog($_FILES );
5. move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" $_FILES['monFichier'<🎜. >]['nom']);
6. écho 'réussi' ;
}
8. fonction writeLog($log){
 
9. if(is_array($log) | | is_object($log)){
10. $log = json_encode($log );
}
 
12. $log = $log."rn";
 
14. file_put_contents('log.log', $log,FILE_APPEND);
}
?>

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.

Texte original : http://www.cnblogs.com/hutuzhu/p/5254532.html