Html5 FileReader melaksanakan fungsi muat naik imej segera contoh kemahiran tutorial code_html5

Berikut adalah pratonton yang dilaksanakan di bawah ie9 Ia masih berbeza daripada ie8 Walau bagaimanapun, saya ingat bahawa ie8 nampaknya juga menggunakan fungsi fiter Kerana projek itu hanya memerlukan ie9 atau ke atas, saya tidak menulis versi untuk ie8

Salin kod Kodnya adalah seperti berikut: > /kepala> 🎜>limpahan: tersembunyi ; } #preview_wrapper{ lebar:300px; tinggi:300px; } # preview_fake{ /* Objek ini digunakan untuk memaparkan imej pratonton di bawah IE*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); : tersembunyi; } #preview_size_fake{ /* Objek ini hanya digunakan untuk mendapatkan saiz asal imej di bawah IE, dan tidak mempunyai kegunaan lain*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=image); width:300px; visibility:hidden; overflow: hidden; #preview{ /* / lebar:300px; tinggi: 300px; limpahan: tersembunyi; onUploadImgChange(pengirim){ jika ( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ alert('Format imej tidak sah! '); kembali palsu; } var objPreview = document.getElementById('preview'); .getElementById('preview_size_fake'); if( sender.files && sender.files[0] ){ //Di sinilah chrome dan ff serasi objPreview.style.display = 'block'; >objPreview.style.width = 'auto'; objPreview.style.height = 'auto' // Disebabkan isu keselamatan, Firefox tidak lagi dapat mendapatkan fail lengkap secara langsung melalui input[fail]; .value Path objPreview.src = sender.files[0].getAsDataURL(); }else if( objPreviewFake.filters ){ // IE7, IE8 muncul apabila menetapkan alamat imej setempat kepada img .src Akibat yang tidak dapat diterangkan //(persekitaran yang sama kadangkala dipaparkan, kadangkala tidak), jadi ia hanya boleh diselesaikan dengan penapis // IE7 dan IE8 tidak boleh secara langsung menghantar input[fail].nilai disebabkan isu keselamatan Dapatkan laluan fail lengkap sender.select(); sender.blur(); var imgSrc = document.selection.createRange().text; .Microsoft.AlphaImageLoader').src = imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; alert("Imej berjaya dipilih!"); (objPreviewSizeFake.offsetWidth); autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); ){ autoSizePreview( pengirim, pengirim.offsetWidth, sender.offsetHeight ); } fungsi autoSizePreview( objPre, originalWidth, originalHeight ){ var zoomParam = clacImgZoomParamid( 300,W original ); objPre.style.width = zoomParam.width 'px'; objPre.style.marginLeft = zoomParam.left 'px'; } fungsi clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = { width:width, height:height , atas:0, kiri:0 }; if( lebar>maxWidth || tinggi>maxHeight ){ rateWidth = lebar / maxWidth; rateHeight ){ param.width = maxWidth; param.height = tinggi / rateWidth; 🎜>} } param.left = (maxWidth - param.width) / 2; param.top = (maxHeight - param.height) / 2; } Ia digunakan untuk pratonton imej--> 🎜 >