Question

我之前已经问过这个问题，但我没有得到真正的解决方案。我正在开发一个社交网站。在用户注册页面，用户有添加照片的规定。我的问题是我想要在单击表单末尾的提交按钮之前，显示用户上传到div的图像。我搜索了很多，但是找不到正确的图像。

我的HTML代码是这样的：

 <img src="<?php echo $row_picture;?>" name="picture" class="settingspic"  width="75" height="91" alt="profile pic" name="picture"/><a href="" onclick="return uploadimg()"> Upload</a></li>
 <input type="file" name="file" id="file" style="display:none;" />

我的javascript代码是：

function uploadimg()
{
 var uploader = document.getElementById('file');
 uploader.click();
 return false;
}

当我单击提交按钮时，图像将插入数据库中。我希望在用户上传文件时显示图像。

Answer 1

以下是我在我们网站上使用的内容。这是用于在上载之前预览图像，即在提交表单之前。你的问题有点不同，但我希望这会有所帮助。

<强> HTML：

<img id="preview_img" style="max-width: 130px; max-height: 130px;" src="http://www.domain.com/images/<?php echo $this->profile_details->photo? $this->profile_details->photo: "default.png"; ?>"/>
<input type="file" id="avatar" name="avatar" onchange="readURL(this);"/>

<强> JavaScript的：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#preview_img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

上传时显示图像

1 个答案: