图片上传前预览

最新推荐文章于 2024-09-09 12:05:08 发布

原创最新推荐文章于 2024-09-09 12:05:08 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个兼容FF及IE8、9等浏览器的文件上传实时预览功能实现方案。该方案利用HTML5的FileReader API实现了跨浏览器兼容性，并对不同浏览器下的实现细节进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!DOCTYPE html > 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%> 
<%@ include file="/common/taglibs.inc"%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>测试下拉框</title> 
<script type="text/JavaScript" src="${ctx }/js/jquery1.7.2.js"></script> 
<script type="text/javascript"> 
    function previewIMG(img) { 
        if (img.files && img.files[0]) { 
            var reader = new FileReader(); 
            reader.onload = function(e) { 
                $('#blah') 
                .attr('src', e.target.result); 
            } 
            reader.readAsDataURL(img.files[0]); //URL是一起的，编辑器可能认为是敏感字符串，去掉空格就可以了
 
            $("#imgDiv").show(); 
        } else { 
            //IE下，使用滤镜        
            img.select();     
            var imgSrc = document.selection.createRange().text;     
            var localImagId = document.getElementById("blah");       //必须设置初始大小     
            localImagId.style.width = "450px";     
            localImagId.style.height = "300px";       
            //图片异常的捕捉，防止用户修改后缀来伪造图片     
            try{           
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";   
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;     
                }catch(e){           
                    alert("您上传的图片格式不正确，请重新选择!");      
                    return false;      
                } 
                document.selection.empty(); 
                $("#imgDiv").show(); 
        } 
    } 
</script> 
</head> 
<body> 
    <input type="file" id="loadFile" name="loadFile" 
        onchange="previewIMG(this)" /> 
        <div id="imgDiv" style="display:none;"> 
            <img id="blah"> 
        </div> 
</body> 
</html>