带图像预览的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)
• 上载image.php

Answer 2

Jasny Bootstrap是一个第三方 Bootstrap 组件库，可以让您接近。

请参阅文档。

根据以下内容编辑您的代码：

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>