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

标签 php javascript jquery html

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

相关文章:

javascript - 在 Clojurescript 中访问 "this"

javascript - 从动态创建的下拉列表中获取值

javascript - 如果嵌套元素触发事件,不要让容器处理它

php - Wordpress:在 TinyMCE iframe 中添加事件

javascript - 如何使用 Moment.js 获取 X 天后的年龄?

javascript - Meteor:通过单击按钮获取服务器端生成的文件

javascript - JQGRID-JQMODAL : Disable close modal when click on overlay

javascript - php 和 ajax 代码中的 Jquery ajax 问题

php - 如何在 LARAVEL 4 上使用 TCPDF

php - 如何通过 PHP 在 Cpanel 中创建电子邮件帐户?