Kemahiran pratonton_javascript muat naik fail API Fail JavaScript

Untuk aplikasi berasaskan penyemak imbas, mengakses fail tempatan menyusahkan. Biasanya kita hanya boleh menggunakan tag untuk memuat naik fail. Proses pelaksanaan ialah: apabila memilih fail, atribut nilai menyimpan nama fail yang ditentukan oleh pengguna Apabila borang diserahkan, penyemak imbas akan menghantar kandungan fail yang dipilih kepada pelayan dan bukannya nama fail sahaja. Kemudian dapatkan alamat yang dikembalikan oleh pelayan dan pratontonnya.

Tapi kalau satu hari nanti kita nak upload gambar, dan lepas upload gambar, preview dan nak tukar gambar lain, kena upload kat server dulu baru preview. Apabila rangkaian agak perlahan, ini benar-benar menyusahkan.

Jadi kadangkala kita perlu pratonton sebelum memuat naik ke pelayan, terutamanya yang mempunyai fungsi pemotongan, seperti penggantian avatar di Sina Weibo. Walau bagaimanapun, satu-satunya perkara yang boleh kami lakukan pada masa ini ialah menggunakan pembangunan pemalam atau menggunakan flash Memandangkan pelaksanaan teknikal pelayar yang berbeza adalah berbeza, untuk menjadikan program menyokong berbilang pelayar, program kami akan menjadi sangat kompleks dan sukar untuk dilakukan. mengekalkan. Nasib baik, kini terdapat API Fail.

Dengan mendengar peristiwa perubahan, kita boleh mengetahui fail yang dipilih oleh pengguna dan menambah koleksi fail, yang akan mengandungi objek fail dan setiap objek fail sepadan dengan fail. Dan kesemuanya mempunyai nama atribut baca sahaja, saiz, jenis, lastModifiedDate.

Ambil sebagai contoh, pantau perubahan dan cetak objek failnya:

　

Daripada ini kita boleh mengetahui beberapa maklumat tentang format fail, nama fail, saiz fail dan lain-lain yang dipilih oleh pengguna. Oleh itu, kami boleh mengesahkan dengan mudah sama ada dokumen yang dipilih memenuhi beberapa keperluan kami.

Selain itu, API Fail juga menyediakan jenis FileReader untuk membaca data dalam fail.

Jenis FileReader melaksanakan mekanisme membaca fail tak segerak, serupa dengan XMLHttpRequest, tetapi ia membaca sistem fail dan bukannya pelayan jauh. Dan menyediakan beberapa kaedah membaca:

• readAsText(fail,pengekodan): Baca fail dalam bentuk teks biasa dan simpan teks baca dalam atribut hasil Parameter kedua digunakan untuk menentukan jenis pengekodan, pilihan.
• readAsDataURL(fail): Fail baca disimpan dalam atribut hasil dalam bentuk URL data.
• readAsBinaryString(file): Baca fail dan simpan rentetan dalam atribut hasil.
• readAsArrayBuffer(fail): Baca fail dan simpan ArrayBuffer yang mengandungi kandungan fail dalam atribut hasil

Baca imej setempat yang sama melalui kaedah di atas, dan cetak maklumat yang disimpan dalam atribut hasil untuk perbandingan seperti berikut:

readAsText(fail,pengekodan):

readAsDataURL(fail):

Melalui perbandingan di atas, kami mendapati kaedah membaca fail ini memberikan kemudahan yang hebat untuk pemprosesan data fail yang fleksibel. Contohnya, membaca fail imej dan menyimpannya sebagai URL data boleh digunakan sebagai fungsi pratonton sebelum memuat naik.

Memandangkan proses pembacaan tidak segerak, terdapat beberapa acara dalam FileReader untuk mengendalikan situasi yang berbeza: kemajuan (sama ada data baharu telah dibaca), ralat (sama ada ralat telah berlaku), muatkan (sama ada keseluruhan fail telah dibaca) dokumen).

Jika fail tidak boleh dibaca kerana pelbagai sebab, peristiwa ralat akan dicetuskan Apabila peristiwa ralat dicetuskan, akan ada kod atribut (kod ralat) disimpan dalam objek dalam atribut ralat FileReader.

Contoh penggunaan FileReader untuk pratonton muat naik:

HTML:

<label class="item_label">上传照片：
 <span style="width: 100px; height: 100px;border:1px solid #ccc; display:inline-block"><img src="#" id="uploadPreview" style="width: 100%; height: 100%;"></span>
 <input type="file" name="file" id="postFile" style="width:74px;">
 <span id="error_text" style="display: none;">提示</span>
</label>
　　

JavaScript:

document.getElementById('postFile').onchange = function() {
 var val = this.value;
 var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式
 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符，并且转换成小写
 var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;
 _alertMsg = $('#error_text');
 var oFReader = new FileReader();
 if (this.files.length === 0) { return; }
 var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
  
 if (oFile.size / 1024 < 100) {
  _alertMsg.html("<font style='color:blue'>√</font>").show()
 };
 if (result < 0) {
  _alertMsg.html("请输入正确格式:" + upLoadType).show();
 } else{
  _alertMsg.html("<font style='color:blue'>√</font>").show();
 };
 
 oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
 oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
  document.getElementById("uploadPreview").src = oFREvent.target.result;
 };
};

Kesan dan URL imej dikembalikan:

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