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:

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

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