[英]Preview an image before upload not working in Internet Explorer 8
I am using file upload to upload images then the image gets previewed on a div prior to submitting. 我正在使用文件上传功能上传图片,然后在提交之前先在div上预览了图片。
My HTML: 我的HTML:
<div class="modal" id="definitionModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Definition</h4>
</div>
<div class="modal-body">
<div class="grid1">
<textarea>Example: Lorem Ipsum ignus sempres cunando valore sendre indire trane fact ilsa nid france</textarea>
</div>
<div class="image-upload">
<label for="uploadFile1">
<img class="upload-img" src="img/camera-icon.jpg">
</label>
<input class="uploadFile" id="uploadFile1" type="file" name="image" class="img" />
</div>
<div class="grid2">
<div class="imagePreview imagePreview1"></div>
</div>
</div><!-- end modal-body -->
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save</a>
<a href="#" class="btn btn-primary">Save & Add Another</a>
<a href="#" data-dismiss="modal" class="btn btn-primary btn-white">Cancel</a>
</div>
</div>
</div>
</div><!-- end Definition Modal -->
My CSS: 我的CSS:
.modal .grid2 {display: none;}
.upload-img {height: 100px; width: 100px;}
.modal .grid2 {
background: #ebebeb;
height: 100px;
padding: 5% 0;
}
.grid2 img {display: flex; margin-left: 15%; width: 70px;}
.imagePreview {
width: 70px;
height: 48px;
margin: auto;
position: relative;
top: 0px;
left: 17%;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
.uploadFile {margin-left: 15px; margin-top: 25px; color: #FFF; max-width: 95%;}
The JavaScript that makes it all work: 使它们全部起作用的JavaScript:
$(function() {
$("#uploadFile1").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$(".imagePreview1").css("background-image", "url("+this.result+")");
$("#definitionModal .image-upload").css("display" , "none");
$("#definitionModal .grid2").css("display" , "block");
}
}
});
});
Now this works exactly how I want in all modern browsers. 现在,这完全符合我在所有现代浏览器中的要求。 But when testing it on Internet Explorer 8 it does not. 但是,当在Internet Explorer 8上对其进行测试时,则不会。 I would like to know if there is a workaround for IE8 as I need to support it also. 我想知道IE8是否有解决方法,因为我也需要支持它。
The live link for the website can be found at: 该网站的实时链接可以在以下位置找到:
http://www.expertfrontend.com/test/index.html http://www.expertfrontend.com/test/index.html
(Clicking on the 'Add a fact' will open up the modal for the image upload) (点击“添加事实”将打开图像上传的模式)
I was able to make it work on Internet Explorer 8 using the code below. 使用下面的代码,我可以使它在Internet Explorer 8上运行。 The problem is that if I have multiple file uploads I cant use the code below. 问题是,如果我上传了多个文件,则无法使用下面的代码。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(".imagePreview1").css("background-image", "url("+this.result+")");
$("#definitionModal .image-upload").css("display" , "none");
$("#definitionModal .grid2").css("display" , "block");
}
reader.readAsDataURL(input.files[0]);
}
}
$("#uploadFile1").change(function(){
readURL(this);
});
Would appreciate any help in order to customize this code to be used multiple times on the same page. 感谢您提供帮助以定制此代码以在同一页面上多次使用的帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.