用户本地图片上传

最新推荐文章于 2024-05-28 22:57:36 发布

小非肥

最新推荐文章于 2024-05-28 22:57:36 发布

阅读量276

点赞数 1

分类专栏：项目部分文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_42988712/article/details/108368615

版权

项目部分专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这只是上传工作，并没有保存在数据库当中，以后补充。

效果展示：

在这里插入图片描述

选择图片

在这里插入图片描述

上传展示
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        form{
            width:270px;
        }
        input{
            width: 64%;
            background: #eee;
        }
        input:focus{
            background: #fff;
        }
        form{
            padding: 0 12px 12px;
        }
        label{
            display: block;
            padding-bottom:12px;
        }
        .label-text{
            width: 36%;
            float: left;
        }
        #upload-tip{
            border: 1px dashed #d9d9d9;
            width: 135px;
            height: 135px;
            line-height: 135px;
            cursor: pointer;
            font-size: 36px;
            color:#d9d9d9;
        }
        #img-show{
            width: 135px;
            height: 135px;
            display: block;
            margin: 0 auto;
            object-fit: cover;
        }
    </style>
    <script>
        function imgfileChange() {
            var upload_tip = document.getElementById("upload-tip");
            var img_show = document.getElementById("img-show");
            var imgfile = document.getElementById("imgfile");

            var freader = new FileReader();
            freader.readAsDataURL(imgfile.files[0]);
            freader.onload = function (e) {
                img_show.src = e.target.result;
                img_show.style.display = "inline";
                upload_tip.style.display = "none";
            };
        }
    </script>
</head>
<body>
<div id="app">
    <div id="wrap">
        <div id="header">
            <div style="float: right;padding-top: 24px">
                <!--时间显示区域-->
                <span id="show">
                </span>
            </div>
            <h1>旅游信息管理系统</h1>
        </div>
        <div id="header-bar"></div>
        <div id="content" style="height: 480px">
            <img src="../img/timg.jpg" style="float: right;height: 320px">
            <h2>添加景点</h2>
            <form action="viewspotlist.html" method="post">
                <label>
                    <div class="label-text">景&emsp;&emsp;点：</div>
                    <input type="text" v-model="place.name">
                </label>
                <label>
                    <div class="label-text">印象图片：</div>
                    <div style="text-align: center;padding-left: 36%">
                        <div id="upload-tip">+</div>
                        <img src="" alt="" id="img-show" style="display: none">
                        <input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
                    </div>
                </label>
                <label>
                    <div class="label-text">旺季时间：</div>
                    <input type="text" v-model="place.hotTime">
                </label>
                <label>
                    <div class="label-text">旺季门票：</div>
                    <input type="text" v-model="place.hotTicket">
                </label>
                <label>
                    <div class="label-text">淡季门票：</div>
                    <input type="text" v-model="place.dimTicket">
                </label>
                <label>
                    <div class="label-text">景点描述：</div>
                    <input type="text" v-model="place.placeDes">
                </label>
                <label>
                    <div class="label-text">所属省份：</div>
                    <select v-model="place.provinceId">
                        <option :value="pro.id" v-for="pro in provinces" v-text="pro.name"></option>
                    </select>
                </label>
                <button type="button" @click="savePlaceInfo">提 交</button>&emsp;
                <a :href="'./viewspotlist.html?id='+id">返回</a>
            </form>
        </div>
        <div id="footer">
            eternalreminisce@126.com
        </div>
    </div>
</div>

</body>
</html>

小非肥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户本地图片上传

这只是上传工作，并没有保存在数据库当中，以后补充。效果展示：选择图片上传展示<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/style.css"> <style>
复制链接

扫一扫