Mobiles Terminal HTML5 realisiert Datei-Upload_HTML/Xhtml_Webseitenproduktion

Die meisten auf der PC-Seite hochgeladenen Dateien spielen keine Rolle, wenn auf der mobilen Seite jedoch immer noch verschiedene redundante Plug-Ins verwendet werden Um die Funktion zum Hochladen von Bildern zu haben, da H5 bereits über entsprechende Schnittstellen verfügt und die Kompatibilität gut ist, wird der Verwendung von H5 für die Implementierung natürlich Vorrang eingeräumt.

Die wichtigsten verwendeten Technologien sind:

ajax

FileReader

FormData

HTML-Struktur:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div class="camera-area"> 
2.  <form enctype="multipart/ form-data" method="post">
3.  <Eingabe Typ="Datei" Name="fileToUpload" Klasse="fileToUpload" akzeptieren="image/*" capture="camera"/>
4.  <div Klasse="upload- Fortschritt"><span>span>div>
5. Formular>
6.  <div class="thumb" >div>
7. div>

Das Paket upload.js hängt von zepto ab

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. (Funktion($) {   
2.   $.extend($.fn, {   
3.     Datei hochladen: Funktion(opts) {   
4.       dies.each(Funktion() {   
5.         var $self = $(this);   
6.         var doms = {   
7.           "fileToUpload": $self.find(".fileToUpload"),   
8.           "thumb": $self.find(".thumb"),   
9.           "progress": $self.find(".upload-progress")   
10.         };   
11.         var funs = {   
12.           //选择文件，获取文件大小,也可以在这里获取文件格式，限制用户上传非要求格式的文件   
13.           "fileSelected": Funktion() {   
14.             var files = (doms.fileToUpload)[0].files;   
15.             var count = files.length;   
16.             for (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.               sonst  
22.                 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString()   'KB';   
23.             }
24. funs.uploadFile();
25. },
26.  //Dateien asynchron hochladen
27. uploadFile: function() {
28.  var fd = new FormData();//Formulardatenobjekt erstellen
29. var files = (doms.fileToUpload)[0].files;
30. var count = files.length;
 
31. for (var index = 0; index < count; index ) {
32. var file = files[index]; fd.append(opts.file, file);
//Füge die Datei zu den Formulardaten hinzu
33. funs.previewImage(file);
//Vorschau des Bildes vor dem Hochladen oder Vorschau des Textes mit anderen Methoden
34.                                                           
35. var
xhr =
36. new XMLHttpRequest(); xhr.upload.addEventListener("progress"
, funs.uploadProgress,
37. false); // Upload-Fortschritt überwachen xhr.addEventListener("load"
, funs.uploadComplete,
38. false); xhr.addEventListener("error"
, opts.uploadFailed,
39. false); xhr.open("POST"
, opts.url>);
40. xhr.send(fd); },
41. //Dateivorschau
42. Vorschaubild: Funktion(Datei) {
43. var gallery = doms.thumb;
44. var img = document.createElement("img"); img.file = file;
45. doms.thumb.html(img);
46.  
//Verwenden Sie die FileReader-Methode, um den Bildinhalt anzuzeigen
var
48. reader = new FileReader(); reader.onload = (
Funktion
49. (aImg) {
Zurück
50. Funktion(e) { aImg.src = e.target.result;
51.                                            
})(img);
reader.readAsDataURL(file);
},
uploadProgress:
55. function
(evt) {
56. if
(evt.lengthComputable) {
57. var
percentComplete = Math.round(evt.loaded * 100 / evt.total);
58. doms.progress.html(percentComplete.toString() '%');
59.                                                            },
60. "uploadComplete"
:
61. Funktion
(evt) {
62. Alert(evt.target.responseText)                                                         };
63. doms.fileToUpload.on("change", function() {
64. doms.progress.find("span").width("0"); >
65. funs.fileSelected();
66. });
67. });
68. }
69. });
70. })(Zepto);

Aufrufmethode:

JavaScript-CodeInhalt in die Zwischenablage kopieren

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

PHP-Teil:

PHP-CodeInhalt in die Zwischenablage kopieren

2. if (isset($_FILES['myFile'])) {
3. // Beispiel:
4. writeLog($_FILES); move_uploaded_file(
5. $_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
6. Echo 'erfolgreich'; }
8. Funktion writeLog($log){  
9. if(is_array($log) | |. is_object($log)){
10. $log = json_encode($log); }
11.  
12. $log = $log."rn";
13.  
14. file_put_contents('log.log', $log,FILE_APPEND); }
15. ?>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Originaltext: http://www.cnblogs.com/hutuzhu/p/5254532.html