如何在上传前后预览图像？
Posted
技术标签:
【中文标题】如何在上传前后预览图像？【英文标题】：How to preview an image before and after upload? 【发布时间】：2013-04-18 22:10:40 【问题描述】：我要预览表单中的图像或照片，但它不起作用，html 代码如下所示：
<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm">
<p><label for="image">Upload Image:</label>
<input type="file" id="imageUpload"/></p>
<p><button type="submit" class="button">Save</button></p>
<div id="preview">
<img src="profile pic.jpg" id="thumb" />
</div>
</form>
并在下面合并了 JS 代码/脚本：
<script type="text/jaavascript">
$(document).ready(function()
var thumb=$('#thumb');
new AjaxUpload('imageUpload',
action:$('newHotnessForm').attr('action'),
name:'image',
onSubmit:function(file,extension)
$('#preview').addClass('loading');
,
onComplete:function(file,response)
thumb.load(function()
$('#preview').removeClass('loading');
thumb.unbind();
);
thumb.attr('src',response);
);
);
我的表单上有两个主要问题： 1. 为什么图片或图片的预览不起作用？ 2。单击保存按钮时如何从表单中粘贴照片，它将转到/链接到我创建的另一个 php 或 PHP 页面？
【问题讨论】：
Preview an image before it is uploaded的可能重复 这是简单的方法***.com/a/61380951/11766145 【参考方案1】：试试这个：（预览）
<script type="text/javascript">
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]);
</script>
<body>
<form id="form1" runat="server">
<input type="file" onchange="readURL(this);" />
<img id="blah" src="#" />
</form>
</body>
工作演示here>
【讨论】：
您的解决方案确实有效，但它是否可以在我上传该链接到另一个页面的图片或图像的代码（如<form id="form1" runat="server" action='page.php'>）下工作？
@meVeekay，我们可以在您的上述解决方案中设置最大图像数量吗？
我在使用多个输入，如何使用上面的代码来完成【参考方案2】：
meVeekay 的回答很好，我只是通过做两件事使其更加即兴发挥。
检查浏览器是否支持 HTML5 FileReader()。
通过检查扩展名只允许上传图像文件。
HTML：
<div id="wrapper">
<input id="fileUpload" type="file" />
<br />
<div id="image-holder"></div>
</div>
jQuery :
$("#fileUpload").on('change', function ()
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg")
if (typeof (FileReader) != "undefined")
var image_holder = $("#image-holder");
image_holder.empty();
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[0]);
else
alert("This browser does not support FileReader.");
else
alert("Pls select only images");
);
【讨论】：
【参考方案3】：在输入时type=file添加一个事件onchange="preview()"
对于函数preview()，输入：
thumb.src=URL.createObjectURL(event.target.files[0]);
活生生的例子：
function preview()
thumb.src=URL.createObjectURL(event.target.files[0]);
<form>
<input type="file" onchange="preview()">
<img id="thumb" src="" />
</form>【讨论】：
【参考方案4】： #######################
### the img page ###
#######################
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#f').live('change' ,function()
$('#fo').ajaxForm(target: '#d').submit();
);
);
</script>
<form id="fo" name="fo" action="nextimg.php" enctype="multipart/form-data" method="post">
<input type="file" name="f" id="f" value="start upload" />
<input type="submit" name="sub" value="upload" />
</form>
<div id="d"></div>
#############################
### the nextimg page ###
#############################
<?php
$name=$_FILES['f']['name'];
$tmp=$_FILES['f']['tmp_name'];
$new=time().$name;
$new="upload/".$new;
move_uploaded_file($tmp,$new);
if($_FILES['f']['error']==0)
?>
<h1>PREVIEW</h1><br /><img src="<?php echo $new;?>" />
<?php
?>
【讨论】：
这在nextimg页面上不是真的工作，图像没有显示和预览。是否涉及任何数据库？如果没有，当然，我的项目倾向于在客户端-服务器上运行。 【参考方案5】：function readURL(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function(e)
$('#ImdID').attr('src', e.target.result);
;
reader.readAsDataURL(input.files[0]);
img
max-width: 180px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='file' onchange="readURL(this);" />
<img id="ImdID" src="" />【讨论】：
以上是关于如何在上传前后预览图像？的主要内容，如果未能解决你的问题，请参考以下文章