问题描述
这是我的laravel
<label><b>User Profile Picture <i class="ik ik-alert-circle" style="color: orange" data-toggle="tooltip"
data-placement="top" title="If dont have doctor profile picture upload dummy picture"></i></b>
<span class="text-danger">*</span></label>
<input type="file" class="file-upload-default" name="image">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info" disabled placeholder="Upload Image">
<span class="input-group-append">
<button class="file-upload-browse btn btn-primary" type="button">Upload</button>
</span>
</div>
这是一个预览div
<div class="col-md-6">
<img id="showimage" src=""
style="width: 100px; height: 100px;"
>
</div>
这是我的脚本
<script type="text/javascript">
$(document).ready(function () {
console.log("hello");
$('#image').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#showimage').attr('src',e.target.result);
}
reader.readAsDataURL(e.target.files['0']);
});
});
</script>
无论在 imge
上传什么内容,我都想在 showimage
中预览这些内容但不起作用,您能帮忙解决这个问题吗?
注意:添加了 Jquesy CDN 并按预期工作
解决方法
文件输入没有 id ,但 jQuery 选择器正在寻找 id=image。
只需将 id="image" 添加到文件输入中。