php – 如何在上传之前和之后预览图像？

发布时间：2020-12-13 21:27:34 所属栏目：PHP教程来源：网络整理

导读：我将在表单中预览图像或照片,但它不起作用,HTML代码如下所示： form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm" plabel for="image"Upload Image:/label input type="file" id="imageUpload"//p pbu

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!