Question

我试图让用户上传他们捐赠的物品的照片。出于某种原因，他们上传的文件的名称在选择后不会显示。我看了之前问的question，我的代码仍然有问题。我不确定为什么它没有显示文件名。

这是我的代码：

＆＃13;

.container {
  padding-bottom: 30px;
}
.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

＆＃13;

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col col-xs-12 col-md-6 col-md-offset-3">
      <div class="panel panel-default">
        <div class="panel-heading text-center">
          <h4>New Donation</h4>
        </div>

        <form class="form ws-validate" method="post" action="add.php" enctype="multipart/form-data">

          <div class="panel-body">


            <input type="hidden" name="add" value="1" />

            <div class="form-group col col-md-6">
              <label for="GroupID">Organization</label>
              <select class="form-control" name="GroupID" readonly value="<?php echo $row['id']; ?>">
                <option value="<?php echo $row['id']; ?>" readonly selected>

                  <?php echo $row[ "Name"]; ?>

                </option>
              </select>
            </div>

            <div class="form-group col col-md-6">
              <label for="DonationType">Donation Type</label>
              <select class="form-control" name="DonationType" value="<?php echo $_POST['donationType']; ?>" readonly>
                <option readonly selected value="<?php echo $_POST['donationType']; ?>">

                  <?php echo $_POST[ 'donationType']; ?>

                </option>
              </select>
            </div>

            <div class="form-group required col col-md-6">
              <label for="ItemName">Item Name</label>
              <input type="text" class="form-control" name="ItemName" id="ItemName" required />
            </div>

            <div class="form-group required col col-md-6">
              <label for="Date">Date Donated</label>
              <input type="text" class="form-control datepicker" name="Date" id="Date" required autocomplete="off" />
            </div>

            <div class="form-group required col col-md-4">
              <label for="ItemValue">Value per Item</label><span class="text-muted pull-right" style="cursor:pointer;" data-toggle="modal" data-target="#itemInfo"><span class="fa fa-info-circle"></span></span>
              <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="number" class="form-control sums num1" name="ItemValue" id="ItemValue" step="0.01" min="0" placeholder="0.00" />
              </div>
            </div>

            <div class="form-group col col-md-4">
              <label for="ItemQuantity">Quantity</label>
              <input type="number" class="form-control sums num2" name="ItemQuantity" id="ItemQuantity" min="0" value="1" />
            </div>

            <div class="form-group col col-md-4">
              <label for="Total">Total</label>
              <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" name="Total" id="Total" step="0.01" readonly placeholder="-" />
              </div>
            </div>

            <div class="form-group col col-md-8">
              <label for="ItemDescription">Description</label>
              <textarea class="form-control" name="ItemDescription" id="ItemDescription" style="height: 34px; max-height: 100px; resize: vertical;" required></textarea>
            </div>

            <div class="form-group col col-md-4">
              <label for="ItemQuality">Item Quality</label>
              <select class="form-control" name="ItemQuality" id="ItemQuality">
                <option value="" selected disabled>-</option>
                <option value="High">High</option>
                <option value="Medium">Medium</option>
                <option value="Low">Low</option>
              </select>
            </div>
            <div class="form-group col col-xs-12">
              <label for="file">Image Upload</label>
              <div class="input-group">
                <span class="input-group-btn">
									<span class="btn btn-primary btn-file">
										Browse&hellip; <input type="file" name="uploadedfile" id="uploadedfile" >
									</span>
                </span>
                <input type="text" class="form-control" readonly>
              </div>
              <span class="help-block">

							</span>
            </div>
          </div>
          <div class="panel-footer">
            <span onclick="history.go(-1);" class="btn btn-default">Back</span>
            <button type="submit" class="btn btn-primary pull-right">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

非常感谢有关此主题的任何帮助。

Answer 1

我发现有一个问题正在运行，试图在过时的浏览器上验证表单。出于某种原因，此脚本干扰了正在运行以上载文件的脚本。删除它解决了这个问题。

Bootstrap File Upload不显示文件名

1 个答案: