gpt4 book ai didi

php - 如何在上传前后预览图像?

转载 作者:IT王子 更新时间:2023-10-28 23:54:32 25 4
gpt4 key购买 nike

我要在表单中预览图像或照片,但它不起作用,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>

工作演示 here>

关于php - 如何在上传前后预览图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16207575/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com