html5选择多张图片在页面内预览

最新推荐文章于 2024-12-04 11:21:40 发布

allen_csdns

最新推荐文章于 2024-12-04 11:21:40 发布

阅读量2.7k

点赞数 1

分类专栏：前端文章标签： html javascript js

本文链接：https://blog.csdn.net/allen_csdns/article/details/104755507

版权

本文介绍如何使用HTML5的FileReader API实现用户在网页上选择多张图片后实时预览，并在点击提交后将图片数据发送到后台的功能。详细展示了相关代码示例。

摘要由CSDN通过智能技术生成

需求：点击选择图片(可选多张)，确定后将选择的图片显示在页面上，点击提交将图片提交给后台。

效果图：
在这里插入图片描述
源码demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>showImages</title>
<style type="text/css">
    .float{
        float:left;
        width : 200px;
        height: 200px;
        overflow: hidden;
        border: 1px solid #CCCCCC;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    img{
        position: relative;
    }
    .result{
        width: 200px;
        height: 200px;
        text-align: center;
        box-sizing: border-box;
    }
 
 
    #file_input{
        display: none;
    }
 
 
    .delete{
        width: 200px;
        height:200px;
        position: absolute;
        text-align: center;
        line-height: 200px;
        z-index: 10;
        font-size: 30px;
        background-color: rgba(255,255,255,0.8);
        color: #777;
        opacity: 0;
        transition-duration: 0.7s;
        -webkit-transition-duration: 0.7s;
    }
 
 
    .delete:hover{
        cursor: pointer;
        opacity: 1;
    }
 
 
 
</style>
 
 
<script src="http://libs.baidu.com/jquery/2.0.

最低0.47元/天解锁文章