HTML直接上传图片[重复]答案

【问题标题】：HTML upload directly image [duplicate]HTML直接上传图片[重复]
【发布时间】：2017-08-26 21:06:00
【问题描述】：

我有一个页面，允许用户上传他们的图片作为他们的个人资料图片。我有这个代码：

<form method = "post" action = "" enctype="multipart/form-data">
    <input type = "hidden" name = "size" value = "1000000">
    <input type = "file" name = "image">
    <input type = "submit" name = "upload" value = "Upload Image">
</form>

我的 php：

if(isset($_POST['upload'])) {
    $target = "profileimgs/".$key.basename($_FILES['image']['name']); 

    $image = $key.basename($_FILES['image']['name']);


    $sql = "UPDATE users SET img = '$image' WHERE idnumber = $idnumber";
    mysqli_query($con,$sql);

    if(move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
        header("Location:home.php");
    } else {
        header("Location:error_uploading.php");
    }
}

通过选择图片，将显示的唯一预览是图片的文件名。我想在他们选择图像后立即添加他们选择的图像的“预览”。就像您在 facebook 上上传个人资料图片时一样 - 您从计算机中选择一张图片，然后当您点击 select picture 时，它会自动将您的图片上传到页面并为您提供该图片的预览，而无需点击这么多按钮。

我可以做些什么来实现这一目标吗？

【问题讨论】：

是的，有。你在这方面做了什么尝试？我看到了一段很好的上传代码，但没有看到预览（你的问题是什么）。一个简单的搜索就会让你走得很远。如果你有任何问题，你可以在这里问他们。
已解决：stackoverflow.com/questions/4459379/…
如果需要在上传后预览图像，您可以从php而不是文件名向客户端发送文件，将iframe元素设置为target的targetstackoverflow.com/questions/168455/how-do-you-post-to-an-iframe

标签： javascript php html

【解决方案1】：

<form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>


<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]);
        }
}

$("#imgInp").change(function(){
    readURL(this);
});
</script>
It will show instead image using javascript base encode. your php code work as well as.

【讨论】：

【解决方案2】：

你可以使用jasny插件的图片上传小部件，有一个漂亮的上传器

【讨论】：