利用file控件实现点击图片更改并回显

程序员文章站 2022-06-15 17:51:22

...

近段时间在修改项目上的一个功能时，发现可以用这种方式实现点击图片并提交服务器后回显（这里多亏了我的项目经理），将此方法分享给大家作讨论。

当然为了突出关键代码没有写服务器代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="description" content="这里是实现点击图片, 调出file的选择文件窗口, 确认后更改图片并回显">
    <title>换图</title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <style type="text/css">
        .file{width: 480px;height:400px;position:absolute;left: 2;cursor:pointer;border-color: orange;
            filter:alpha(opacity:0);opacity: 0}
        .image{position:absolute; border-color: red;left: 2}
    </style>
</head>
<body>
    <div class="main-div">
        <p>点击下图可更改图片</p>
        <img src="img/hezi.jpg" width="480" height="400" class="image" id="image">
        <input type="file" class="file" id="image-input">
    </div>

<script type="text/javascript">
    $(function(){
        $("#image-input").change(function (){
            $("#image").attr("src",$("#image-input").val());
        });
    });

</script>
</body>
</html>

这里image是作图片展示的，image-file提供文件选择和服务器提交，让image和image-file相对定位，两者大小一致，image-file设置完全透明并覆盖在image上（不需要设置z-index属性值，file的z-index值默认比img大，请见http://www.w3school.com.cn/cssref/pr_pos_z-index.asp了解更多），鼠标点击实际是点击的image-file，看似点击在图片上。

网上也有这种方式：

同样有img和file, 将file隐藏,在img上添加click事件, 其中让file执行click方法,也可以实现选择图片, 但是这种方式不能提交到服务器，可能是因为浏览器安全机制。

ps：filter:alpha(opacity:0)是IE的兼容性处理，opacity: 0是CSS3的样式，实现完全透明；

测试代码没有做浏览器兼容性处理（如获得image-file的值），请自测；

欢迎探讨更好的方法。