js melaksanakan kemahiran pratonton_javascript imej bahagian hadapan tulen

Muat naik imej ialah fungsi biasa dan pratonton imej ialah subfungsi penting bagi fungsi muat naik. Sebelum ini, saya pernah melanggan acara onchange elemen input[type=file], muat naik imej ke pelayan setelah laluan ditukar, dan kemudian dapatkan laluan imej dan berikannya kepada elemen img. Tanpa mengira penyelesaian untuk penyerahan fail tak segerak, membersihkan imej pratonton sementara tersebut pada bahagian pelayan telah meningkatkan banyak beban kerja.

Saya secara tidak sengaja menjumpai maklumat yang berkaitan tentang pratonton imej bahagian hadapan tulen daripada MDN Selepas menyusunnya, saya merakamnya untuk rujukan masa hadapan.

1. Persediaan 1──Pembaca Fail　　　　　　　

FileReader ialah ciri baharu HTML5, digunakan untuk membaca data jenis Blob dan Fail. Penggunaan khusus adalah seperti berikut:

(1) Kaedah pembinaan

var fr = new FileReader();
(2). Atribut

readyState: jenis tidak ditandatangani pendek, keadaan semasa contoh FileReader, (KOSONG——0, tiada data telah dimuatkan; MEMUAT——1, data sedang dimuatkan; SELESAI——2, semua permintaan baca telah selesai), baca sahaja.

hasil: kandungan fail baca, baca sahaja.

ralat: jenis ialah DOMError, menunjukkan ralat yang berlaku semasa membaca fail, baca sahaja.

(3) Kaedah

abort(): Hentikan operasi baca dan tetapkan readyState kepada DONE. Apabila tiada operasi baca dilakukan, memanggil kaedah ini akan membuang pengecualian DOM_FILE_ABORT_ERR.

readAsArrayBuffer(gumpalan gumpalan): Baca data, atribut hasil ditetapkan kepada jenis ArrayBuffer

readAsText(Blob blob [, encoding='utf-8']): Baca data, atribut hasil ditetapkan kepada String type

readAsBinaryString(Blob blob): Baca data, atribut hasil ditetapkan kepada data binari mentah

readAsDataURL(gumpalan gumpalan): Baca data, atribut hasil ditetapkan kepada borang Skim URI Data (untuk butiran, sila lawati "Dewan Ajaib JS: Pengenalan kepada Skim URI Data")

(4).Acara

onload: Dicetuskan selepas berjaya membaca data

ralat: Dicetuskan apabila pengecualian dilemparkan semasa membaca data

onloadstart: dicetuskan sebelum membaca data

onloadend: dicetuskan selepas membaca data, dicetuskan selepas onload atau onerror

onabort: dicetuskan selepas membatalkan bacaan

sedang berjalan: dicetuskan secara berkala semasa proses membaca

(5). Penyemak imbas menyokong

FF3.6+, Chrome7+, IE10+

2. Persediaan 2──Penapis DXImageTransform.Microsoft.AlphaImageLoader　　

(1) Fungsi: Fungsi utama adalah untuk menjadikan imej lutsinar (IE5.5~6 tidak menyokong png lutsinar)

(2). Cara menggunakannya dalam gaya

#preview{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

(3). Cara menggunakannya dalam JS

var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

(4) Atribut

didayakan: Pilihan, tetapkan sama ada penapis diaktifkan. Julat nilai benar (lalai), palsu

Kaedah saiz: Pilihan, tetapkan cara imej yang ditapis dipaparkan dalam sempadan bekas, pangkas julat nilai (potong imej agar sesuai dengan saiz bekas), saiz imej (nilai lalai, tambah atau kurangkan saiz bekas supaya muat dengan imej) ), skala (skalakan imej agar sesuai dengan saiz bekas)

src: diperlukan, gunakan URL mutlak atau relatif untuk menunjuk ke imej latar belakang. Ia sah apabila URL ialah alamat tempatan komputer pengguna, dan apabila src elemen img ialah alamat tempatan komputer pengguna, pengecualian yang tidak membenarkan akses kepada sistem fail tempatan akan dibuang.

Tiga , pelaksanaan 　　　　　　　　　　

Seterusnya, kami akan menggunakan readAsDataURL FileReader untuk mendapatkan Skim URI Data untuk melaksanakan fungsi pratonton imej Dalam IE5.5~9, kami akan menggunakan penapis DXImageTransform.Microsoft.AlphaImageLoader untuk pemprosesan turun taraf.

serpihan html:

<style type="text/css">
#preview{
  width: 100px;
  height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
  #preview{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>

coretan js:

var preview = function(el){
  var pv = document.getElementById("preview");
  // IE5.5~9使用滤镜
  if (pv.filters && typeof(pv.filters.item) === 'function'){
    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
  }
  else{
    // 其他浏览器和IE10+（不支持滤镜）则使用FileReader
    var fr = new FileReader();
    fr.onload = function(evt){
      var pvImg = new Image();
      pvImg.style.width = pv.offsetWidth + 'px';
      pvImg.style.height = pv.offsetHeight + 'px';
      pvImg.src = evt.target.result;
      pv.removeChild(0);
      pv.appendChild(pvImg);
    };
    fr.readAsDataURL(el.files[0]);
  }
};

4 Disebabkan pertimbangan keselamatan dalam IE11, alamat sebenar fail yang dipilih oleh pengguna tidak boleh diperolehi melalui nilai, outerHTML dan getAttribute pada elemen input[type=file] Hanya nama fail C: fakepath boleh diperolehi . Oleh itu, jika anda menggunakan IE11, tetapi mod teks ditetapkan kepada di bawah 10, tiada cara untuk mencapai pratonton imej.

Penyelesaian 1──Tambahkan ayat ini di bawah teg kepala:

Penyelesaian 2── Gunakan document.selection.createRangeColleciton() untuk mendapatkan alamat sebenar Operasi khusus adalah seperti berikut:

五、补充：使用window.URL.createObjectURL代替FileReader　　　　　　 

  通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串，若图片较大那么字符串则更长，若页面出现reflow时则会导致性能下降。解决方案如下：

  1. 预览的img标签使用绝对定位，从而脱离正常文档流，那么就与文档的其他元素无关了，而reflow时则不会影响性能。

  2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

var createObjectURL = function(blob){
 return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};

注意： window.URL.createObjectURL 生成的数据链接是独占内存的，因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时，也会自动释放内容。

var resolveObjectURL = function(blob){
 window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};

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