Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
4年前关闭。
我正在尝试在通过JavaScript输入的文件中显示选定的图像。这是我使用的代码,如下所示:
我使用此文件输入来上传图像,但不知道选择图像时如何显示所选图像?
使用JS完成上传后,如何显示它?
希望这可以帮助...
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
4年前关闭。
我正在尝试在通过JavaScript输入的文件中显示选定的图像。这是我使用的代码,如下所示:
<label id="lblFileUploadProfile">
<asp:FileUpload runat="server" ID="ImageProfileUpload" />
<asp:Image runat="server" ID="ImgProfilePic" ImageUrl="img/user-5.png" />
我使用此文件输入来上传图像,但不知道选择图像时如何显示所选图像?
使用JS完成上传后,如何显示它?
最佳答案
试试这个方法:
<img id="blah" class="photo" ImageUrl="img/user-5.png" />
<label for="imgInp" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i>Add Image
</label>
<input type='file' id="imgInp" name="image" />
<script>
//Preview & Update an image before it is uploaded
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
</script>
<style type="text/css">
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid rgb(197, 197, 197);
border-radius: 4px 4px 4px 4px;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
float: right;
width: 5.25em;
margin-left:200px;
}
.photo{
width: 7em;
height: 9em;
border: 1px solid rgb(197, 197, 197);
border-radius: 4px 4px 4px 4px;
float:right;
}
</style>
希望这可以帮助...