html - 使用图像预览 Bootstrap 文件上传

Question

我正在尝试使用 bootstrap 进行文件上传，但我不知道我在做什么，所以有人可以告诉我如何执行此操作以及如何获取上传的图像预览，因为文件上传旨在上传图像到我的网站上。这是我目前在 HTML 中的内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<form class="form-horizontal" enctype="multipart/form-data">
  <div class="form-group">
    <label class="control-label col-sm-2">Pic Name:</label>
    <div class="col-xs-4">
      <input type="text" class="form-control" name="profilepicname" />
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Upload Pic:</label>
    <div class="col-xs-3">
      <input type="file" name="profilepic" />
    </div>
  </div>
</form>

另外网页上的图片命名和文件上传部分之间也有很大的空间。我该如何摆脱它？

Answer 1

带有预览的图像上传表单示例，使用 Bootstrap 构建且没有额外的 CSS，它使用 jQuery AJAX 查询负责上传的 PHP 脚本:

• index.html
• upload-image.js ( Ajax )
• upload-image.php