Javascript 如何在提交表单之前加载图像_Javascript_Jquery_Html

Javascript 如何在提交表单之前加载图像

javascript jquery html

Javascript 如何在提交表单之前加载图像,javascript,jquery,html,Javascript,Jquery,Html,基本上，我有一个表格，里面有一个带有文件输入的图像框，现在我需要显示从文件输入中选择的图片，并在我的图像框中显示，而不需要提交表格我找到了一个教程，上面写着： <!DOCTYPE html> <html> <head> <script> var reader = new FileReader(); reader.onload = function (e) { $('#blah

基本上，我有一个表格，里面有一个带有文件输入的图像框，现在我需要显示从文件输入中选择的图片，并在我的图像框中显示，而不需要提交表格

我找到了一个教程，上面写着：

<!DOCTYPE html>
<html>
    <head>
    <script>
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

       function readURL(input) {
            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imgInp").change(function(){
            readURL(this);
                alert(input.val());
        });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>

    </body>
</html>


var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
函数readURL（输入）{
if（input.files&&input.files[0]）{
reader.readAsDataURL（input.files[0]）；
}
}
$（“#imgInp”）.change（函数（）{
readURL（this）；
警报（input.val（））；
});

但这不会在“我的图像”框中显示“选择图像”。

请尝试此示例js

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#imgInp”）.change（函数（）{
readURL（this）；
});
试试这个示例js

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#imgInp”）.change（函数（）{
readURL（this）；
});

问题中的javascript将返回预期结果。问题是放置
元素或未使用.ready（）
。此外，输入
未在更改
事件中定义。您可以将中的input.val（）
替换为this.value
，将事件处理程序更改为alert（）
调用的参数
将
元素放在html的
元素下面


var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
函数readURL（输入）{
if（input.files&&input.files[0]）{
reader.readAsDataURL（input.files[0]）；
}
}
$（“#imgInp”）.change（函数（）{
readURL（this）；
警报（该值）；
});
问题中的javascript将返回预期结果。问题是放置
元素或未使用.ready（）
。此外，输入
未在更改
事件中定义。您可以将中的input.val（）
替换为this.value
，将事件处理程序更改为alert（）
调用的参数
将
元素放在html的
元素下面


var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
函数readURL（输入）{
if（input.files&&input.files[0]）{
reader.readAsDataURL（input.files[0]）；
}
}
$（“#imgInp”）.change（函数（）{
readURL（this）；
警报（该值）；
});