jQuery 脚本代码:
$(function() {
$('#html_btn1').change(function(){
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
case 'jpg' :
case 'png' :
case 'gif' :
case 'jpeg' : showimagepreview1(this); break;
default : $('#errorimg').html("Invalid Photo"); break;
}
});
$('#html_btn2').change(function(){
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
case 'jpg' :
case 'png' :
case 'gif' :
case 'jpeg' : showimagepreview2(this); break;
default : $('#errorimg').html("Invalid Photo"); break;
}
});
$('#html_btn3').change(function(){
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
case 'jpg' :
case 'png' :
case 'gif' :
case 'jpeg' : showimagepreview3(this); break;
default : $('#errorimg').html("Invalid Photo"); break;
}
});
function showimagepreview1(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#cu1').attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
function showimagepreview2(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#cu2').attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
function showimagepreview3(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#cu3').attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
});
HTML 标记:
<div class="form-group">
<img id="cu1" src="upload-photo-img.jpg"/>
<input type="file" path="images" id="html_btn1" />
<img id="cu2" src="upload-photo-img.jpg"/>
<input type="file" path="images" id="html_btn2" />
<img id="cu3" src="upload-photo-img.jpg"/>
<input type="file" path="images" id="html_btn3" />
</div>
每当我尝试上传图像时,上面的代码都可以正常工作,它会检查验证并预览图像
但是我想将代码最小化为只有一个更改函数和一个 showimagepreview 函数
请给我一个想法如何实现?
最佳答案
@Huangism 是正确的,这可能应该在代码审查中。但是,为了提供帮助:
$(function() {
// combine binding selector in to one
$('#html_btn1,#html_btn2,#html_btn3').change(function(){
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
case 'jpg' :
case 'png' :
case 'gif' :
case 'jpeg' : showimagepreview(this); break; // change to single "showimagepreview" function
default : $('#errorimg').html("Invalid Photo"); break;
}
});
function showimagepreview(input) {
// grab "cu#" using the original element's id
var cu_id = '#cu' + input.id.match(/\d+$/)[0];
/* alt: var cu_id = input.id.replace('html_btn','#cu'); */
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
// reference id here
$(cu_id).attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
});
- 使用逗号分隔的选择器将您的绑定(bind)合并为一个
- 删除重复的
showimagepreview#
方法并统一为一个函数- 根据原始输入的 ID 将硬编码的
cu#
id 更改为动态 ID。 - 在选择器中引用该 ID。
- 根据原始输入的 ID 将硬编码的
关于javascript - 如何最小化基于 jQuery 选择器的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24287533/