HTML5 melaksanakan kemahiran tutorial function_html5 muat naik berbilang imej

Saya telah menulis tentang muat naik imej sebelum ini, tetapi ia adalah satu muat naik Baru-baru ini, terdapat keperluan perniagaan yang memerlukan beberapa muat naik, jadi saya menulis semula

Struktur HTML:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div kelas="bekas" >
2.  <label>Sila pilih fail imej: label>
3.  <input taip="fail" id="fail_input" berbilang/>
4. div>

Dengan cara ini, mari kita bincangkan tentang logik utama muat naik ini:

·Gunakan teg input dan pilih type=file Ingat untuk membawa berbilang, jika tidak, anda hanya boleh memilih satu imej

·Ikat masa perubahan input,

·Intinya ialah cara mengendalikan acara perubahan ini Gunakan antara muka FileReader baharu H5 untuk membaca fail dan mengekodnya ke dalam base64 Perkara seterusnya ialah berinteraksi dengan rakan sekelas belakang

Kod JS:

Kod JavaScriptSalin kandungan ke papan keratan

1. window.onload = function(){   
2.         var input = document.getElementById("file_input");   
3.         var result,div;   
4.     
5.         if(typeof FileReader==='undefined'){   
6.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
7.             input.setAttribute('disabled','disabled');   
8.         }else{   
9.             input.addEventListener('change',readFile,false);   
10.         }
    　　　　　//handler   
11.         function readFile(){   
12.             for(var i=0;i<this.files.length;i++){   
13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
14.                     return alert("上传的图片格式不正确，请重新选择")
    　　　　　　　　　　}   
15.                 var reader = new FileReader();   
16.                 reader.readAsDataURL(this.files[i]);   
17.                 reader.onload = function(e){   
18.                     result = '
    this.result+'" alt=""/>
    ';
19. div = document.createElement('div');
div.innerHTML = hasil;
document.getElementById(
21. 'body').appendChild(div);//Masukkan pokok dom
    　　　『 >                                                                                                                           
22. }
23. Adakah ini cara untuk memuat naik berbilang gambar 0.0
24. Walau bagaimanapun, ini tidak menukar imej kepada pengekodan base64 dan kemudian memaparkannya pada bahagian hadapan Apabila saya menyegarkannya, tiada apa-apa Selepas memasukkan imej, buka alat pembangun dan lihat bahawa struktur html adalah seperti ini

Pendekatan yang realistik ialah kami menghantar fail dalam baris gilir fail ke bahagian belakang dalam fungsi pemprosesan Pelajar bahagian belakang mengembalikan fail dan laluan yang disulitkan MD5 yang sepadan dengan fail ke bahagian hadapan, dan bahagian hadapan mengambil laluan ini. dan menjadikannya lebih unggul.

Selepas itu, fail MD5 dihantar semula ke bahagian belakang, kerana bahagian depan biasanya memadamkan gambar selepas memuat naik mereka dalam pangkalan data.

Beritahu saya cara berinteraksi dengan jquery

Kod JavaScript

Salin kandungan ke papan keratan

1. fungsi readFile(){   
2.              var fd = baharu FormData();   
3.             untuk(var i=0;i<ini.files.panjang;i ){   
                
4. var pembaca = baharu FileReader();   
                pembaca.readAsDataURL(
5. ini.fail[i]);   
                fd.append(i,
6. ini.files[i]);
   　　　　　　　　　 }   
                $.ajax({   
                    url : 
8. '',   
                    jenis : 
9. 'siaran',   
                    data : fd,   
                    kejayaan : 
11. fungsi(data){   
                        console.log(data)   
                  　}    
                })   
}      

FormData也是H5的新接口，用来模拟表单控件的提交，最大的好处呢就是可以提些交以提交交交，最大的好处呢就是可以提些交以提些交 然后success的回调里面我们拿回了想要的数据后呢，就可以将图片插进去页，义去页，义去页，以去页，书去页，以去页，焢廕🎜>

上个效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：

http://www.cnblogs.com/weapon-x/p/5237064.html