我已尝试使用Bootstrap将图像上传到数据库的几种不同方法。我的IDE是Visual Studio。我需要的是让上传的图像出现在预览中。虽然我之前看过一个工作演示,但是当我运行我的代码时,照片文件会显示在屏幕上而没有预览图像。因此,我不确定图像是否成功存储在数据库中。任何建议将非常感谢!我已经包含了所有当前代码:
HTML:
<div>
<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
<div class=socialmediaside2>
<input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
<div class=input-group>
<input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
<span class="input-group-btn input-group-sm">
<button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
</span>
</div>
</div>
</div>
<div class=upload-demo>
<div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>
</div>
JavaScript的:
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
reset($(this));
});
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.fileUpload').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}
CSS:
body {
img.portimg {
display: none;
max-width: 200px;
max-height: 200px;
}
}