Html 带图像预览的引导文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34173254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap file upload with image preview
提问by jcwalker2006
I am attempting to do file uploads with bootstrap but I don't know what I am doing so can someone tell me how to do this and how to get an image preview for the upload as the file upload is intended to upload images onto my website. Here is what I have so far in HTML.
我正在尝试使用引导程序上传文件，但我不知道我在做什么，所以有人可以告诉我如何执行此操作以及如何获取上传的图像预览，因为文件上传旨在将图像上传到我的网站. 这是我目前在 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>Also there is a big space between naming the picture and the file upload section on the webpage. How, do I get rid of this?
网页上的图片命名和文件上传部分之间也有很大的空间。我该如何摆脱这个？
回答by Francesco Borzi
An example of an image upload form with preview, built with Bootstrap and no additional CSS, it uses jQuery AJAX to query a PHP script which is responsible for the upload:
带有预览的图像上传表单示例，使用 Bootstrap 构建且没有额外的 CSS，它使用 jQuery AJAX 查询负责上传的 PHP 脚本：
回答by Virendra Nagda
Jasny Bootstrap, a third-party Bootstrap component library, allows you to come close.
Jasny Bootstrap，第三方 Bootstrap 组件库，让你接近。
See documentation.
请参阅文档。
Edit your code according to this:
根据此编辑您的代码：
<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>
