Rumah > hujung hadapan web > tutorial js > Javascript digabungkan dengan fileReader untuk memuat naik kemahiran pictures_javascript

Javascript digabungkan dengan fileReader untuk memuat naik kemahiran pictures_javascript

WBOY
Lepaskan: 2016-05-16 16:16:50
asal
1367 orang telah melayarinya

Saya tidak akan menerangkan API Fail secara terperinci di sini Kawan, anda boleh melakukannya sendiri Sekarang kami akan menggunakan pemegang fail untuk membaca kandungan fail Ini dicapai melalui antara muka FileReader Muatkan kandungan fail ke dalam memori dan tetapkan kepada pembolehubah js.

Salin kod Kod adalah seperti berikut:

fungsi getImgSrc(sasaran, panggil balik) {
Jika (window.FileReader) {
      var oPreviewImg = null, oFReader = new window.FileReader();
oFReader.onload = fungsi (oFREvent) {
oPreviewImg = Imej baharu();
              jenis var = target.files[0].type.split("/")[1];
          var src = oFREvent.target.result;
oPreviewImg.src = src;
Jika (jenis panggil balik == "fungsi") {
                   panggil balik (oPreviewImg, sasaran, jenis, src);
            }
               kembalikan oPreviewImg.src;
        };
          kembali (fungsi () {
            var aFiles = target.files;
                  jika (aFiles.length === 0) {
                  kembali;
            }
Jika (!IsImgType(aFiles[0].type)) {
alert("Anda mesti memilih fail imej yang sah!");
                  kembali;
            }
Jika (aFiles[0].saiz > 1024 * 1024) {
                   target.value = "";
alert('Sila muat naik imej saiz fail kurang daripada 1M.');
                  kembali;
            }
            oFReader.readAsDataURL(aFiles[0]);
         })();
}
Jika (navigator.appName === "Microsoft Internet Explorer") {
          kembali (fungsi () {
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value;
         })();
}
}

Di atas adalah kod utama untuk memuat naik imej menggunakan javascript digabungkan dengan fileReader Adakah anda suka?

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan