Terminal mudah alih HTML5 merealisasikan muat naik fail_HTML/Xhtml_Pengeluaran halaman web

Kebanyakan fail yang dimuat naik pada bahagian PC menggunakan pemalam Tidak mengapa jika anda memperkenalkan flash Namun, jika bahagian mudah alih masih menggunakan pelbagai pemalam berlebihan, ia mungkin akan disembur sehingga mati untuk mempunyai fungsi memuat naik imej, memandangkan H5 sudah mempunyai antara muka yang berkaitan Dan keserasian adalah baik, sudah tentu keutamaan diberikan kepada penggunaan H5 untuk pelaksanaan.

Teknologi utama yang digunakan ialah:

ajax

Pembaca Fail

FormData

Struktur HTML:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div kelas="kawasan kamera"> 
2.  <bentuk enctype="multipart/ form-data" kaedah="post">
3.  <input taip="fail" nama="failUntukMuat Naik" kelas="fileToUpload" terima="imej/*" tangkap="kamera"/>
4.  <div kelas="muat naik- kemajuan"><span>span>div>
5. borang>
6.  <div kelas="ibu jari" >div>
7. div>

Muat naik.js yang dibungkus bergantung pada zepto

Kod JavaScriptSalin kandungan ke papan keratan

1. (fungsi($) {   
2.   $.extend($.fn, {   
3.     Muat naik fail: fungsi(pilihan) {   
4.       ini.setiap(fungsi() {   
5.         var $self = $(ini);   
6.         var doms = {   
7.           "fileToUpload": $self.find(".fileToUpload"),   
>
8.           "ibu jari": $self.find(".ibu jari"),   
9.           "kemajuan": $self.find(".upload-progress")    🎜>
10.         };   
11.         var keseronokan = {   
12.            //选择文件，获取文件大小，也可以在这里获取文开件，取文廏非要求格式的文件   
13.           "fail Dipilih": fungsi() {   
14.             var fail = (doms.fileToUpload)[0].files;   
15.             var count = files.length;   
16.             untuk (var indeks = 0; indeks < kiraan; < indeks ) {  > 
              
17. var fail = fail[indeks];   
              
18. var Saiz fail = 0;   
              
19. jika (saiz.fail > 1024 * 1024)   
                Saiz fail = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString()   
20. 'MB''MB''MB'   
21.               lain  
22.                 Saiz fail = (Math.round(file.size * 100 / 1024) / 100).toString()   'KB'   
            }
23. funs.uploadFile();
24. },
25.  //Muat naik fail secara tidak segerak
26. muat naikFail: fungsi() {
27.  var fd = baharu FormData();//Buat objek data borang
28. var fail = (doms.fileToUpload)[0].fail
29. var kiraan = fail.panjang
30.  untuk (var indeks = 0; indeks < kiraan; indeks ) {
31. var fail = fail[indeks];
32. fd.append(opts.file, fail);//Tambahkan fail pada data borang
33. funs.previewImage(file);//Preview imej sebelum memuat naik, atau pratonton txt melalui kaedah lain
34.                                                            
35. var xhr = baharu XMLHttpRequest(
xhr.upload.addEventListener(
36. "kemajuan", funs.uploadProgress, false); // Pantau kemajuan muat naik
xhr.addEventListener(
37. "muat", funs.uploadComplete, false);
xhr.addEventListener(
38. "error", opts.uploadFailed, false);
xhr.open(
39. "POST", opts.url;
xhr.send(fd);
},
41. //Pratonton fail
42. pratontonImej: fungsi(fail) {
43. var galeri = doms.thumb
44. var img = document.createElement("img");
img.file = fail;
doms.thumb.html(img);
46.  
//Gunakan kaedah FileReader untuk memaparkan kandungan imej
var
48. pembaca = baharu FileReader( reader.onload = (
fungsi
49. (aImg) {
kembali
50. fungsi(e) { aImg.src = e.target.hasil;
51.                                            
})(img);
pembaca.readAsDataURL(fail);
53. },
54. uploadProgress:
fungsi
55. (evt) {
56. jika (evt.lengthComputable) {
57. var peratusLengkap = Math.round(evt.loaded * 100 / evt.total);
doms.progress.html(percentComplete.toString()
58. '%'
                                                           
59. },
"muat naik Selesai"
60. :
fungsi
61. (evt) {
62. makluman(evt.target.responseText)                                                          };
63. doms.fileToUpload.on("ubah", fungsi() {
64. doms.progress.find("span").lebar("0"); >
65. funs.fileSelected();
66. });
67. });
68. }
69. });
70. })(Zepto);

Kaedah panggilan:

Kod JavaScript

Salin kandungan ke papan keratan

$(
1. ".kawasan-kamera").failMuat Naik({  
2. "url": "savetofile.php",   
3. "fail": "Fail saya" });

Bahagian PHP:

Kod PHP

Salin kandungan ke papan keratan

1. jika (isset($_FILES['myFile'])) {
2. // Contoh: tulisLog(
3. $_FAIL); move_uploaded_file(
4. $_FILES['myFile']['tmp_name'], "muat naik/" $_FILES['myFile'<🎜. >]['nama']); gema
5. 'berjaya'; }
fungsi
6. writeLog(
$log
7. ){  jika(
adalah_array
8. ($log) | |. ialah_objek($log)){ $log = json_encode(
$log
9. ); }  
$log
10. =
$log
11. ."rn";  
file_put_kandungan
12. (
'log.log'
13. , $log,FILE_APPEND); } ?>

14. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

    Teks asal: http://www.cnblogs.com/hutuzhu/p/5254532.html