我使用下面的代码来预览上传前的图像和它工作正常。但是,如何解决图像extenstion,使得用户不会上传任何无效的图片和尺寸也
<html lang="en">
<head>
<title>Change image on select new image from file input</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<input type="file" name="file" id="profile-img">
<img src="" id="profile-img-tag" width="200px" />
<br />
<input type="file" name="file" id="profile-img2">
<img src="" id="profile-img2-tag" width="200px" />
<br />
<input type="file" name="file" id="profile-img3">
<img src="" id="profile-img3-tag" width="200px" />
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#' + $(input).attr('id') + '-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("[type=file]").change(function() {
readURL(this);
});
</script>
</body>
</html>
提前致谢。
<html lang="en">
<head>
<title>Change image on select new image from file input</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<style type="text/css">
.image-holder{
height: 200px;
}
.image-holder img{
max-height: 100%;
}
</style>
<body>
<input id="fileUpload_one" type="file" multiple />
<div id="image-holder_one" class="image-holder"></div>
<script type="text/javascript">
$("#fileUpload_one").on('change', function () {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder_one");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
</script>
</body>
</html>
添加类到图像被放置div和通过CSS给予相应的造型图像。希望它可以帮助我增加了CSS和类到div希望它帮助。
你需要确保你的形象标签和输入标签都有不同id
s。如果你给图像标记相同id
为您input
标签,但给它-tag
的后缀那么这将是它自己独特的id
。使用这种方法,你可以使用下面的一行:
$('#'+$(input).attr('id') +'-tag').attr('src', e.target.result);
设置相应的图像标签的src
属性。
请参见下面的工作例如:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var extn = input.files[0].type.split('/')[1];
var size = input.files[0].size;
var maxSize = 40000; // file must be smaller than 40kb
var valid = ["gif", "png", "jpg", "jpeg"];
if (valid.includes(extn) && size < maxSize) {
reader.onload = function(e) {
$('#' + $(input).attr('id') + '-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
}
$("[type=file]").change(function() {
readURL(this);
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<input type="file" name="file" id="profile-img">
<img src="" id="profile-img-tag" width="200px" />
<br />
<input type="file" name="file" id="profile-img2">
<img src="" id="profile-img2-tag" width="200px" />
ID必须是对DOM和JavaScript代码不同。
function readURL(input, inputId) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(input)
$('#' + inputId + '-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".profile-img").change(function(){
readURL(this, this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="file" id="profile-img-1" class="profile-img">
<img src="" id="profile-img-1-tag" width="200px" />
<input type="file" name="file" id="profile-img-2" class="profile-img">
<img src="" id="profile-img-2-tag" width="200px" />
你可以尝试多种图片上传和预览代码,也是我在里面添加验证过。
JS代码:
function previewImages() {
var preview = document.querySelector('#preview');
if (this.files) {
[].forEach.call(this.files, readAndPreview);
}
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (!(/\.(jpg|png)$/i.test(file.name))) {
return alert(file.name + " is as not image file");
}
else if(file.size/(1024*1024) > 2 ) {
return alert(file.name + " size is greater than 2MB");
}
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.height = 100;
image.width = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
document.querySelector('#file-input').addEventListener("change", previewImages, false);
<div class="input-container">
<div class="multiple-img">
<p class="choosetext">Choose multiple images :</p>
<input id="file-input" type="file" id= "files" multiple>
<div id="preview" ></div>
</div>
</div>
这将是最容易的。这是所有的代码。只需添加所需height
同时在JavaScript代码上传图像width
属性。尝试这个:
$("#fileUpload_one").on('change', function () {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder_one");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image",
"height": "200px",
"width": "200px"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
<input id="fileUpload_one" type="file" multiple />
<div id="image-holder_one"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
在文件打开/放你得到一个文件对象//删除场景
c.ondrop = function (e) {
var file=e.dataTransfer.files[0];
console.log(file.size);//Co,mpare here size
console.log(this.files[0].type);////Co,mpare type here
};
输入文件类型的场景
的document.getElementById( “店”)。平变化=函数(e)中{
var file =this.files[0];
console.log(file.size);//Co,mpare here size
console.log(this.files[0].type);////Co,mpare type here
fread(this.files[0]);
};