作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个表单,允许用户上传 x 数量的图像。当他们从计算机中选择图像时,可以单击一个按钮,以便他们在提交表单之前预览图像。
有没有一种方法可以自动显示图像,而无需单击“预览”按钮。目前,我正在使用 JS .click 函数,但我希望用户不必单击任何内容即可查看他们上传的图像。
这是我正在使用的代码。
形式为:
<div class="uploadWrapper">
<p>Upload Images</p>
<input type="file" name="files[]" multiple="true" id="files" style="left: 0px;" />
</div>
<input id="go" class="btn_img" type="button" value="Click to Preview Images">
<div id="images_upload"></div>
<script type="text/javascript">
$("#files").click(function(){
$(".btn_img").show();
});
</script>
<?php include_once('upload/image-preview.php'); ?>
image-preview.php 文件:
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#up_image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file").change(function(){
readURL(this);
});
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
reader.onloadend = function(e) {
var image = $('<img class="prev_img">').attr('src', e.target.result);
$(image).appendTo('#images_upload');
$( "#images_upload img" ).wrap( "<div class=\"an_image\">" );
if (i < numFiles) {
i++;
readFile();
}
};
$('#go').click(function() {
imageFiles = document.getElementById('files').files
numFiles = imageFiles.length;
readFile();
});
</script>
我需要做什么才能不必单击“单击预览图像”按钮来查看图像?
谢谢!
最佳答案
循环遍历input.files
并为每个文件创建一个new FileReader()
。 jsFiddle Demo
HTML
<input type='file' class="imageUpload" multiple="true" />
<div class="imageOutput"></div>
JS
$images = $('.images');
$(".imageUpload").change(function(){
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
关于javascript - 显示通过 html 表单上传的照片预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25705867/
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。 我的代码有什么问题? 能否请您向我提供一个简短的解释和有关如何修复它的代码示例? //var
我是一名优秀的程序员,十分优秀!