您好!
我编写了单个java脚本函数,以在上传之前显示图像预览。 对于单个文件上传,我的代码工作正常。
但现在我想通过向用户提供多个选择选项来提供多个图像上传选项(请参阅快照)。此外,我想重用我的功能,显示所选第一个图像的预览。(见快照中的图像)
我如何修改我的HTML代码以及如何重用我的脚本函数?
HTML
<form action="upload.php" method="post" enctype="multipart/form-data">
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" name="uploadedFile" type="file"/>
<input id="fileUpload2" name="" type="file"/>
<input id="fileUpload3" name="uploadedFile" type="file"/>
<div id="image-holder"></div>
</div>
</form>
的Javascript
<script>
$(document).ready(function() {
$("#fileUpload").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");
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>
答案 0 :(得分:0)
这是课程的用途。您只是在fileUpload Id上调用jQuery。如果您要为同一个图像使用相同的图像持有者,则不应每次都清除它。
我重构了一小部分你的代码。试试这个。
HTML
<form action="upload.php" method="post" enctype="multipart/form-data">
<div id="wrapper" style="margin-top: 20px;">
<input class="fileUploadClass" id="fileUpload" name="uploadedFile" type="file"/>
<input class="fileUploadClass" id="fileUpload2" name="" type="file"/>
<input class="fileUploadClass" id="fileUpload3" name="uploadedFile" type="file"/>
<div id="image-holder"></div>
</div>
的JavaScript
<script>
$(document).ready(function() {
$(".fileUploadClass").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");
// 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");
}
});
});