我想上传图片以点击我的图片按钮。从用户目录中选择后将显示图像。
这是我的正常工作脚本，在这里我添加label for来直接选择图像。但在这之后我无法显示选择图像。
这里的问题是解析预览div中的id。怎么办呢。
在我的脚本中，从目录中选择后我无法显示图像。
这是我的上传脚本:(这里888是我目前通过php动态设置的id）
$(document).on('change', '#repfile', function(){
var ID = $(this).attr('class');
var VOID = $(this).attr('alt')
$("#show_img_upload_rep"+ID).show();
$('.upfrmrep'+ID).show();
previewPic(this);
});
//preview image
function previewPic(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#preview_rep"+ input.getAttribute('class')).attr('src', e.target.result);
$("#output_rep"+ input.getAttribute('class')).show();
};
reader.readAsDataURL(input.files[0]);
}
}.replyform {
top:50px;
position:relative;
min-height: 38px;
width: 100%;
}
div.chat {
width: 90%;
}
.replycom {
font-family:Times New Roman, Times, serif;
font-size:12px;
min-height: 25px;
color:#000;
top:0; left:0; z-index:998; background: transparent;
border: 2px solid #ccc;
position:relative;
float:left;
width:100%;
margin: 0;
resize: none;
padding-right:50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#right {
position:absolute;
top: 8px;
right:0px;
height: 35px;
line-height: 35px;
width: 50px;
z-index:999;
}
#right img {
cursor:pointer;
vertical-align: middle;
width:20px;
}<div class="replyform">
<form action="" method="post" class="repfrm888" id="prepfrm">
<input type="hidden" name="username" id="author" value="'.$_SESSION['username'].'"/>
<div class="maintbox">
<div class="chat">
<textarea name="replycom" id="replycom888" class="replycom" placeholder="Type your comment ..."></textarea>
</div>
<div id="right">
<label for="repfile">
<img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png"/>
</label>
</div>
</form>
<div align="left" id="show_img_upload_rep888" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">
<div class="upfrmrep888">
<div id="output_rep888" style="display:none;">
<img id="preview_rep888" src="" alt="No Image Found"/>
</div>
<form class="upload_Reply" id="888'" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="repfile" class="888" alt="111" value="" style="margin:5px 10px;float:left;font-size:12px;font-weight:bold;"/>
<input type="submit" class="upload_repimg" id="888" name="upload_btn" value="Upload Picture"/>
</form>
</div>
</div>
</div>
<button type="submit" name="submitrep" value="" id="repl888" class="replyfrm">Post Reply</button>
</div>
<br><br><br>
<div class="replyform">
<form action="" method="post" class="repfrm999" id="prepfrm">
<input type="hidden" name="username" id="author" value="'.$_SESSION['username'].'"/>
<div class="maintbox">
<div class="chat">
<textarea name="replycom" id="replycom999" class="replycom" placeholder="Type your comment ..."></textarea>
</div>
<div id="right">
<label for="repfile">
<img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png"/>
</label>
</div>
</form>
<div align="left" id="show_img_upload_rep999" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">
<div class="upfrmrep999">
<div id="output_rep999" style="display:none;">
<img id="preview_rep999" src="" alt="No Image Found"/>
</div>
<form class="upload_Reply" id="999'" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="repfile" class="999" alt="111" value="" style="margin:5px 10px;float:left;font-size:12px;font-weight:bold;"/>
<input type="submit" class="upload_repimg" id="999" name="upload_btn" value="Upload Picture"/>
</form>
</div>
</div>
</div>
<button type="submit" name="submitrep" value="" id="repl999" class="replyfrm">Post Reply</button>
</div>
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
答案 0 :(得分：0)
您应该使用getAttribute()来获取元素属性，而不是input.class。
$(document).on('change', '#repfile', function() {
var ID = $(this).attr('class');
var VOID = $(this).attr('alt')
$("#show_img_upload_rep" + ID).show();
$('.upfrmrep' + ID).show();
previewPic(this);
});
//preview image
function previewPic(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#preview_rep" + input.getAttribute('class')).attr('src', e.target.result);
$("#output_rep" + input.getAttribute('class')).show();
};
reader.readAsDataURL(input.files[0]);
}
}.replyform {
top: 50px;
position: relative;
min-height: 38px;
width: 100%;
}
div.chat {
width: 90%;
}
.replycom {
font-family: Times New Roman, Times, serif;
font-size: 12px;
min-height: 25px;
color: #000;
top: 0;
left: 0;
z-index: 998;
background: transparent;
border: 2px solid #ccc;
position: relative;
float: left;
width: 100%;
margin: 0;
resize: none;
padding-right: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#right {
position: absolute;
top: 8px;
right: 0px;
height: 35px;
line-height: 35px;
width: 50px;
z-index: 999;
}
#right img {
cursor: pointer;
vertical-align: middle;
width: 20px;
}<div class="replyform">
<form action="" method="post" class="repfrm888" id="prepfrm">
<input type="hidden" name="username" id="author" value="'.$_SESSION['username'].'" />
<div class="maintbox">
<div class="chat">
<textarea name="replycom" id="replycom888" class="replycom" placeholder="Type your comment ..."></textarea>
</div>
<div id="right">
<label for="repfile">
<img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" />
</label>
</div>
</form>
<div align="left" id="show_img_upload_rep888" class="show_img_upload_rep" style="align:left; text-align:left; float:left; margin-top:0px; display:none">
<div class="upfrmrep888">
<div id="output_rep888" style="display:none;">
<img id="preview_rep888" src="" alt="No Image Found" />
</div>
<form class="upload_Reply" id="888'" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="repfile" class="888" alt="999" value="" style="margin:5px 10px;float:left;font-size:12px;font-weight:bold;" />
<input type="submit" class="upload_repimg" id="888" name="upload_btn" value="Upload Picture" />
</form>
</div>
</div>
</div>
<button type="submit" name="submitrep" value="" id="repl888" class="replyfrm">Post Reply</button>
</div>
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>