如何在上传之前和之后预览图像
How to preview an image before and after upload?
我要在表单中预览图像或照片,但是它不起作用,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 width="160px" height="120px" 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页面,我创建?
试试这个(预览)
<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="#" alt="your image" />
</form>
</body>
meVeekay的回答很好,我只是即兴做了两件事。
-
检查浏览器是否支持HTML5 FileReader()
-
通过检查扩展名,只允许上传图像文件。
<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");
}
});
输入 type =文件添加一个事件 onchange ="预览()"
对于函数preview()
type:
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="" width="150px"/>
</form>
#######################
### 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;?>" width="100" height="100" />
<?php
}
?>
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="" alt="Image" />
相关文章:
- 使用 jQuery 在最后一个图像之后附加 HTML
- 如何使自述按钮在文章的第一段之后显示图像和h3标签
- 在drawImage、C#、AJAX、ASP.NET之后将图像从画布保存到Web服务器
- 在将显示改变为“显示”之后,图像片段粘在周围;显示:无”;
- 在每组三个图像之后添加中断 jquery
- jQuery - contenteditable - 确定图像之前还是之后的插入符号
- 在其自己的图像之后显示 Alt 属性
- 在javascript之后从php加载的动态图像需要运行
- JQuery图像悬停在之前/之后
- 是否有事件在加载DOM之后触发,但在任何外部资产(如图像、样式、iframe等)之前触发?
- Javascript Exif信息只显示在html页面中图像的第一次点击之后
- 在图像元素改变了src之后,计时函数的运行时间
- 如何在上传之前和之后预览图像
- 调用函数一次,仅在JQuery创建的图像被加载之后
- 我如何将插入的URL添加到输入文本之后的图像中
- 不能从JSON.stringify之后的图像路径中删除双引号
- Javascript:鼠标移到缩略图上,在第8个表条目之后,较大的图像不工作
- Javascript调整大图像大小仅适用于F5之后
- 获取DXImageTransform.Microsoft.AlphaImageLoader之后的图像高度
- 使用 .replacewith 更改图像,但保留 id.之后,图像不再在悬停时触发功能