Html5 FileReader implements instant image upload function example code_html5 tutorial skills

The following is a preview implemented under ie9. It is still different from ie8. However, I remember that ie8 seems to also use the fiter function. Because the project only requires ie9 or above, I did not write out the version for ie8

Copy code The code is as follows: Document #kk{ width:400px; height:400px; overflow: hidden ; } #preview_wrapper{ width:300px; height:300px; background-color:#CCC; overflow: hidden; } # preview_fake{ /* This object is used to display preview images under IE*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:300px; overflow: hidden; } #preview_size_fake{ /* This object is only used to obtain the original size of the image under IE, and has no other uses*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); width:300px; visibility:hidden; overflow: hidden; } #preview{ /* This object is used to display preview images under FF*/ width:300px; height:300px; overflow: hidden; } function onUploadImgChange(sender){ if ( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ alert('The image format is invalid! '); return false; } var objPreview = document.getElementById('preview'); var objPreviewFake = document.getElementById('preview_fake'); var objPreviewSizeFake = document .getElementById('preview_size_fake'); if( sender.files && sender.files[0] ){ //This is where chrome and ff are compatible objPreview.style.display = 'block'; objPreview.style.width = 'auto'; objPreview.style.height = 'auto'; // Due to security issues, Firefox is no longer able to obtain the complete file directly through input[file].value Path objPreview.src = sender.files[0].getAsDataURL(); }else if( objPreviewFake.filters ){ // IE7, IE8 appears when setting the local image address to img.src Inexplicable consequences //(the same environment is sometimes displayed, sometimes not), so it can only be solved with filters // IE7 and IE8 cannot directly pass input[file].value due to security issues Get the complete file path sender.select(); sender.blur(); var imgSrc = document.selection.createRange().text; objPreviewFake.filters.item('DXImageTransform .Microsoft.AlphaImageLoader').src = imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; alert("Image selected successfully!"); alert(objPreviewSizeFake.offsetWidth); autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); objPreview.style.display = 'none'; } } function onPreviewLoad( sender){ autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); } function autoSizePreview( objPre, originalWidth, originalHeight ){ var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight ); objPre.style.width = zoomParam.width 'px'; objPre.style.height = zoomParam.height 'px'; objPre.style.marginTop = zoomParam.top 'px' ; objPre.style.marginLeft = zoomParam.left 'px'; } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = { width:width, height:height , top:0, left:0 }; if( width>maxWidth || height>maxHeight ){ rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth &gt ; rateHeight ){ param.width = maxWidth; param.height = height / rateWidth; }else{ param.width = width / rateHeight; param.height = maxHeight; } } param.left = (maxWidth - param.width) / 2; param.top = (maxHeight - param.height) / 2; return param; }

Html5 FileReader implements instant image upload function example code_html5 tutorial skills

Related articles