我可以使用 javascript fileReader 读取上传的图片，但是如何在 jquery 中读取上传的图片，以便在上传前预览图片？
【问题讨论】：
标签： jquery
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#previewHolder').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
} else {
alert('select a file to see preview');
$('#previewHolder').attr('src', '');
}
}
$("#filePhoto").change(function() {
readURL(this);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br/><br/>
<input type="file" name="filePhoto" value="" id="filePhoto" class="required borrowerImageFile" data-errormsg="PhotoUploadErrorMsg">
<br/><br/>
<img id="previewHolder" alt="Uploaded Image Preview Holder" width="250px" height="250px" style="border-radius:3px;border:5px solid red;"/>【讨论】：
input.files[0] 提供索引所以input[0].files[0]
使用javascript
<div class="form-group">
<label for="password" class="form-group">upload Image</label>
<input id="image" type="file" name="image" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])" required="required">
<img id="blah" width="50" height="50" />
</div>【讨论】：
在使用 jquery 上传之前预览图像
创建一个事件onchange，该事件会在选择任何图像时触发，函数loadImg()可用于在框架。
实例：
function loadImg(){
$('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="file" accept="image/" onchange="loadImg()"><br/>
<img id="frame" width="100px" height="100px"/>
</body>
</html>【讨论】：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
p1{
color:orange;
}
p2{
color:green;
}
.thumb-image
{
float:left;
width:50px;
position:relative;
padding:2px;
}
body{
}
#form label{
font:bold 11px arial;
color: #565656;
padding-left: 1px;
}
#form label.mandat{color:red;}
#form img{
margin-bottom: 8px;
}
#form input[type="submit"]{
background-color: #0064aa;
border: none;
color: #fff;
padding: 5px 8px;
cursor: pointer;
font:bold 12px arial;
}
.error{
border: 1px solid olive;
}
</style>
<script>
$.validator.addMethod("error9", function(value, element, error) {
return error.test(value);
} );
$(function() {
$("#register-form").validate({
rules: {
pic: {
required: true,
error9: /(?=.(gif|png|jpg|jpeg))/
}
},
messages: {
pic: {
required: "<p1>Please upload image</p1>",
error9: "<p2> only accept jpg,gif,png</p2>"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
<script>
$(document).ready(function() {
$("#pic").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++)
{
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
echo (image_holder);
}
} else {
//alert ("Pls select only images");
}
});
});
</script>
</head>
<body>
<div style='margin:0 auto'>
<form name= "" id="register-form" action="loginformjq.php" method="post">
<div id="form">
<table border="1" padding="2" cellpadding="2" width="20%" bgcolor="lightblue" align="center" cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><p style="color: purple"><marquee direction="left" behavior="alternate" style="border:solid olive">Student Registration Form</marquee></p></font></center>
</td>
</tr>
<tr><p style="color: yellow"><td>
<p class="error">
<input type="file" name="pic" id="pic"></p><span id="image-holder"> </span>
</p></td></tr>
<tr>
<p style="color: yellow"></p>
<td colspan="1"><input type="submit" value="submit"></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>【讨论】：