【发布时间】：2021-10-10 19:09:55
【问题描述】：
首先，非常感谢您考虑这个问题。
这更像是一个与 ui 相关的查询，我有一个产品管理页面，通过它可以将新产品添加到电子商务网站，我面临的问题是：
上传文件（profilepic）输入后，为文件名定义的标签以某种方式将用于上传图片的按钮推到右侧，而不是在右侧显示名称。
代码在sn-p中间，一直滚动到sn-p底部，应该可以定位到。
我附上了一张相同的图片。
请帮我解决这个问题，上传文件，我希望标签出现在上传按钮旁边的右侧
<!DOCTYPE html>
<html lang="en">
<body class="dashboard-upload">
<!--================================
START DASHBOARD AREA
=================================-->
<section class="dashboard-area">
<div class="dashboard_menu_area">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="dashboard_menu">
<li>
<a href="index.php">
<span class="lnr lnr-home"></span>Sales</a>
</li>
<li>
<a href="">
<span class="lnr lnr-cog"></span>Store</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Landing Page</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Manage Users</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Digital Wallet</a>
</li>
<li class="active">
<a href="">
<span class="lnr lnr-upload"></span>Upload New Item</a>
</li>
<li>
<a href="dashboard-manage-item.html">
<span class="lnr lnr-briefcase"></span>Support Tickets</a>
</li>
</ul>
<!-- end /.dashboard_menu -->
</div>
<!-- end /.col-md-12 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</div>
<!-- end /.dashboard_menu_area -->
<div class="dashboard_contents">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="dashboard_title_area">
<div class="pull-left">
<div class="dashboard__title">
<h3>Upload Your Item</h3>
</div>
</div>
</div>
</div>
<!-- end /.col-md-12 -->
</div>
<!-- end /.row -->
<div class="row">
<div class="col-lg-8 col-md-7">
<form action="#">
<div class="upload_modules">
<div class="modules__title">
<h3>Item Name & Description</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="form-group">
<label for="category">Select Category</label>
<div class="select-wrap select-wrap2">
<select name="country" id="category" class="text_field">
<option value="garina">Garina Game Cards</option>
<option value="pubg">Pubg Game Cards</option>
<option value="ps">Play Station</option>
<option value="xbox">Xbox</option>
<option value="netflix">Netflix</option>
<option value="itunes">Itunes</option>
<option value="google">Google Play</option>
</select>
<span class="lnr lnr-chevron-down"></span>
</div>
</div>
<div class="form-group">
<label for="product_name">Product Name
<span>(Max 100 characters)</span>
</label>
<input type="text" id="product_name" class="text_field" placeholder="Enter your product name here...">
</div>
<div class="form-group no-margin">
<p class="label">Short Description</p>
<input type="text" id="product_name" class="text_field" placeholder="Short Description.">
</div>
<div class="form-group no-margin">
<p class="label">Long Description</p>
<input type="text" id="product_name" class="text_field" placeholder="Long Description">
</div>
<!-- end /.modules__content -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules module--upload">
<div class="modules__title">
<h3>Image</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="form-group">
<div >
<!-- Image is being uploaded here -->
<div class="custom_upload">
<label for="profilepic">
<input type="file" id="profilepic" name="profilepic" class="files">
<span class="btn btn--round btn--sm">Choose File</span>
</label>
<label for="profilepic"></label>
</div>
<!-- end /.custom_upload -->
<div >
<div >
</div>
</div>
<!-- end /.progress_wrapper -->
</div>
<!-- end /.upload_wrapper -->
</div>
<!-- end /.form-group -->
</div>
<!-- end /.upload_modules -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules">
<div class="modules__title">
<h3>Others Information</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="dimension">Release Date</label>
<input type="text" id="dimension" class="text_field" placeholder="Date first available" value="<?php $day=date("d"); $month=date("m"); $year=date("Y"); $date="$day/$month/$year"; echo $date;?>">
</div>
<div class="form-group">
<label for="dimension">Updated On</label>
<input type="text" id="dimension" class="text_field" placeholder="Last Updated On"value="<?php $day=date("d"); $month=date("m"); $year=date("Y"); $date="$day/$month/$year"; echo $date;?>">
</div>
</div>
<!-- end /.col-md-6 -->
</div>
<!-- end /.row -->
<!-- end /.col-md-6 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.upload_modules -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules with--addons">
<div class="modules__title">
<h3>Price</h3><br><br>
<label>For Regular Users</label>
<input type="text" id="rlicense" class="text_field" placeholder="00.00">
<br>
<label>For Premium Users</label>
<input type="text" id="rlicense" class="text_field" placeholder="00.00">
</div>
<!-- end /.module_title -->
<!-- end /.modules__content -->
</div>
<!-- end /.upload_modules -->
<!-- submit button -->
<button type="submit" class="btn btn--round btn--fullwidth btn--lg">Add New Item</button>
</form>
</div>
<!-- end /.col-md-8 -->
<div class="col-lg-4 col-md-5">
<aside class="sidebar upload_sidebar">
<div class="sidebar-card">
<div class="card-title">
<h3>Upload Details</h3>
</div>
<div class="card_content">
<div class="card_info">
<h4>Image Upload</h4>
<p>Please use an imahe of only png/jpg/jpeg format so that nothing in the site breakes.</p>
</div>
<div class="card_info">
<h4>Upload Location</h4>
<p>This product will be available in the store post submission without any delays.</p>
</div>
<div class="card_info">
<h4>Getting Error ?</h4>
<p>Make sure all details are filled, clear your browser cache or try in private mode. If the problem continues, this can be a serious issue in the software kindly connect with the developer as soon as possible at adity@xyberneo.com</p>
</div>
</div>
</div>
<!-- end /.col-md-4 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</div>
<!-- end /.dashboard_menu_area -->
</section>
<!--================================
END DASHBOARD AREA
=================================-->
<!--//////////////////// JS GOES HERE ////////////////-->
<!-- inject:js -->
<script src="js/vendor/jquery/jquery-1.12.3.js"></script>
<script src="js/vendor/jquery/popper.min.js"></script>
<script src="js/vendor/jquery/uikit.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/chart.bundle.min.js"></script>
<script src="js/vendor/grid.min.js"></script>
<script src="js/vendor/jquery-ui.min.js"></script>
<script src="js/vendor/jquery.barrating.min.js"></script>
<script src="js/vendor/jquery.countdown.min.js"></script>
<script src="js/vendor/jquery.counterup.min.js"></script>
<script src="js/vendor/jquery.easing1.3.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/slick.min.js"></script>
<script src="js/vendor/tether.min.js"></script>
<script src="js/vendor/trumbowyg.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/main.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBeySPFGz7DIUTrReCRQT6HYaMM0ia0knA"></script>
<script src="js/map.js"></script>
<!-- endinject -->
<script>
var profilePic = document.getElementById('profilepic'); /* finds the input */
function changeLabelText() {
var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
if (profilePicValue !== '') {
profilePicLabelText.textContent = profilePicValue; /* changes the label text */
}
}
profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
</script>
</body>
</html>
【问题讨论】：
-
这是很多代码。你能把问题简单化吗？可能至少不需要
<head>数据。可能也是 JS/CSS/HTML 问题而不是 PHP。 -
嗨，我已经删除了对查询不重要的所有内容。