这是一个上传图片的页面,我们要在前台用JS验证上传的图片是否合法,且能够动态生成多个上传框。
源码:
<code>
<script type="text/javascript" src="js/jquery-easyui-1.4.3/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
i = 1;
j = 1;
$(document).ready(function(){
$("#btn_addGoodsImage").click(function(){
if(i>4){
alert("最多只能上传5张图片");
return ;
}
$("#goodsImage").append('<div id="divGoodsImage_'+i+'"><input class="upload" name="file'+i+'" type="file" οnchange="change(this)" /><input type="button" value="删除" οnclick="delGoodsImage('+i+')"/></div>');
i = i + 1;
});
$("#btn_addDetails").click(function(){
if(j>4){
alert("最多只能上传5张图片");
return ;
}
$("#goodsImageDetails").append('<div id="divDetails_'+j+'"><input class="upload" name="details_'+j+'" type="file" οnchange="change(this)" /><input type="button" value="删除" οnclick="delDatails('+j+')"/></div>');
j = j + 1;
});
/* $(":file").change(function(){
var name = $(this).val();
var extArray = ['jpg','png'];
var ext = name.substring(name.lastIndexOf('.')+1);
//alert(ext);
if(extArray.indexOf(ext)==-1){
$(this).val('');
alert("只能上传jpg或png格式的图片!");
}
}); */ //这种方法只能验证在最初时的文件框,不能监听到后面append进去的文件框,并且通过标签的类名添加监听也一样
});
function change(obj){ //此种方法为每个生成的标签在其中添加 onchange事件并指定它的监听函数为change(this).
var name = $(obj).val();
var extArray = ['jpg','png'];
var ext = name.substring(name.lastIndexOf('.')+1);
//alert(ext);
if(extArray.indexOf(ext)==-1){
$(obj).val('');
alert("只能上传jpg或png格式的图片!");
}
}
function delGoodsImage(index) {
document.getElementById("goodsImage").removeChild(
document.getElementById("divGoodsImage_" + index));
i--;
}
function delDatails(index) {
document.getElementById("goodsImageDetails").removeChild(
document.getElementById("divDetails_" + index));
j--;
}
</script>
</code>