如何在上传前后预览图像？ [英] how to preview a image before and after upload?
问题描述
我会在表单中预览图片或照片，但不起作用，并且HTML代码如下所示：
< form action =method =postenctype =multipart / form-dataname =personal_imageid =newHotnessForm>
< p>< label for =image>上传图片：< / label>
< input type =fileid =imageUpload/>< / p>
< p><按钮类型=submitclass =button>保存< /按钮>< / p>
< div id =preview>
< img width =160pxheight =120pxsrc =profile pic.jpgid =thumb/>
< / div>
< / form>
以及以下JS代码/脚本：
< script type =text / jaavascript>
$（document）.ready（function（）{
var thumb = $（'＃thumb'）;
新AjaxUpload（'imageUpload'，{
action：$（ 'newHotnessForm'）。attr（'action'），
name：'image'，
onSubmit：function（file，extension）{
$（'＃preview'）。addClass（' '）;
}，
onComplete：function（file，response）{
thumb.load（function（）{
$（'＃preview'）。removeClass（'加载'）;
thumb.unbind（）;
}）;
thumb.attr（'src'，response）;
}
}）;
}）;
有两个主要问题我的表单：
1.图片或图片的预览为什么不起作用？
2.如何从保存按钮被点击时粘贴照片，它会去/链接到我创建的另一个PHP或PHP页面？
< script type =h2_lin>解决方案 文本/ JavaScript的 >
函数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 =form1runat =server>
< input type ='file'onchange =readURL（this）; />
< img id =blahsrc =＃alt =您的图片/>
< / form>
< / body>
工作演示 here>
I going to preview a image or photo in a form,but it doesn't work and the HTML code look like this as below:
<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>
and incorporated JS code/script below:
<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);
}
});
});
There are 2 main questions on my form:
1.Why doesn't the preview of the image or picture work?
2.How to paste the photo from the form when the save button is clicked,it will go/link to another php or php page that I created?
Try this: (For Preview)
<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>
Working Demo here>
这篇关于如何在上传前后预览图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
