Melaksanakan pelbagai muat naik fail berdasarkan kemahiran html5_javascript javascript

Contoh dalam artikel ini berkongsi dengan anda cara melaksanakan pelbagai muat naik fail menggunakan javascript html5 Kandungan khusus adalah seperti berikut

Struktur HTML:

<div class="container">
  <label>请选择一个图像文件：</label>
  <input type="file" id="file_input" multiple/>
</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,
• Perkara utama ialah cara mengendalikan acara perubahan ini Gunakan antara muka FileReader baharu untuk membaca fail dan mengekodnya ke dalam base64 🎜>

Kod JS:

window.onload = function(){
    var input = document.getElementById("file_input");
    var result,div;
 
    if(typeof FileReader==='undefined'){
      result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
      input.setAttribute('disabled','disabled');
    }else{
      input.addEventListener('change',readFile,false);
    }<br>　　　　　//handler
    function readFile(){
      for(var i=0;i<this.files.length;i++){
        if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
          return alert("上传的图片格式不正确，请重新选择")<br>　　　　　　　　　　}
        var reader = new FileReader();
        reader.readAsDataURL(this.files[i]);
        reader.onload = function(e){
          result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';
          div = document.createElement('div');
          div.innerHTML = result;
          document.getElementById('body').appendChild(div); 　　//插入dom树           <br>　　　　　　　　　　}
      }
    }
  }

Adakah mungkin untuk memuat naik berbilang gambar seperti ini?

Walau bagaimanapun, ini tidak menukar imej kepada pengekodan base64 dan kemudian memaparkannya pada bahagian hadapan apabila menyegarkan, 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.

Kemudian fail MD5 dihantar semula ke bahagian belakang, kerana bahagian hadapan biasanya memadamkan gambar selepas memuat naik. pangkalan data.

Beritahu saya cara berinteraksi dengan jquery

function readFile(){
      var fd = new FormData();
      for(var i=0;i<this.files.length;i++){
        var reader = new FileReader();
        reader.readAsDataURL(this.files[i]);
        fd.append(i,this.files[i]);<br>　　　　　　　　　 }
        $.ajax({
          url : '',
          type : 'post',
          data : fd,
          success : function(data){
            console.log(data)
         　} 
        })
}  

FormData juga merupakan antara muka baharu H5, digunakan untuk mensimulasikan penyerahan kawalan borang Kelebihan terbesar ialah ia boleh menyerahkan fail binari

Kemudian selepas kami mendapatkan semula data yang diingini dalam panggilan balik kejayaan, kami boleh memasukkan imej ke dalam halaman, sama seperti kaedah sebelumnya~

Pemarahan terakhir:

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