我想在上传图片之前预览它。
我试过很多方法，比如this .
图片预览不工作。
我不知道我哪里做错了。我试过 https://jsfiddle.net/lesson8/9NeXg/我已经粘贴了我的代码。
注意:Fiddle 工作正常，但是当我将 fiddle 复制到我的页面时它不起作用。我不知道我的错误是什么。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>Untitled Document</title>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile").change(function () {
readURL(this);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type='file' id="inputFile" />
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</form>
</body>
</html>
最佳答案
好吧，解决方案就是把你的脚本代码从<head>到 <body>像这样标记:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<form id="form1" runat="server">
<input type='file' id="inputFile" />
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile").change(function () {
readURL(this);
});
</script>
</body>
</html>
关于javascript - 上传前预览图像 - 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35426236/