标题: [求助]一个教程例子的BUG
kenjacky
新手上路
Rank: 1



UID 6275
精华 0
积分 0
帖子 1
阅读权限 10
注册 2008-3-11
状态 离线
发表于 2008-3-11 11:17  资料  个人空间  短消息  加为好友 
[求助]一个教程例子的BUG

调试教程中例子的时候出现BUG,调了很久希望大家给些建议~~谢谢!!
这个代码实现多文件上传,但是只能显示一个上传文本框,我想是判断最多上传数显示/隐藏的时候出错了


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" c/>
    <title>Multi File Upload</title>

<style>
#mUpload {
width: 100%;
border: 1px solid red;
}
.gone { display: none; }
.back { display: block; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var filesMax = $("input[@type=file]").size();
$('#asdf').append('<div id="files_list" style="border:1px solid black;padding:5px;background:#fff;font-size:x-small;"><strong>Files (maximum '+filesMax+'):</strong></div>');
$('#mUpload br').remove();
$("input[@type=file]").each(function(i){
$(this).change(function(){
doIt(i);
});
if(i>0) $(this).hide();
else $(this).addClass('edited');
});
});
function doIt(n) {
var fileName = $("input[@type=file]:nth-of-type("+n+")").val();
var a=n+1;
$("input[@type=file]:nth-of-type("+n+")").after('<span id="edit'+n+'">'+fileName+'(click to edit)</span>').hide();
$("input[@type=file]:nth-of-type("+a+")").not('.edited').show().before('<br>').addClass('edited');
$("#edit"+n).click(function(){
$(this).remove();
$("input[@type=file]:nth-of-type("+n+")").show();
});
countFiles();
}
function countFiles() {
var filesMax = $("input[@type=file]").size();
var filesUsed = 0;
$("input[@type=file]").each(function(i){
if($(this).val() != '') filesUsed++;
});
var filesLeft = filesMax-filesUsed;
$('#files_list').html('<strong>'+filesUsed+' files chosen('+filesLeft+' remaining) </strong>');
}
</script>
   
</head>
<body>
<h1>Multiple File Upload</h1>

<form action="test.php" method="post" enctype="multipart/form-data" name="asdf" id="asdf">
  <div id="mUpload">
  <p>
<input type="file" class="upload" name="fileX[]" /><br />
<input type="file" class="upload" name="fileX[]" /><br />
<input type="file" class="upload" name="fileX[]" /><br />
    </p>
<input type="button" name="Submit" value="Submit" id="send" />
  </div>
</form>
<script>
$('#send').click(function(){
alert('Demonstration Only: file upload disabled');
});
</script>


</body>
</html>

顶部
LM220088
新手上路
Rank: 1



UID 6886
精华 0
积分 0
帖子 13
阅读权限 10
注册 2008-3-31
状态 离线
发表于 2008-4-2 15:43  资料  个人空间  短消息  加为好友 
抱歉帮不上忙。。。。。





西双版纳旅游                               
顶部
nanjinghhu
新手上路
Rank: 1



UID 9381
精华 0
积分 0
帖子 7
阅读权限 10
注册 2008-6-18
状态 离线
发表于 2008-6-19 01:37  资料  个人空间  短消息  加为好友  添加 nanjinghhu 为MSN好友 通过MSN和 nanjinghhu 交谈
$("input[@type=file]:nth-of-type("+n+")")这是什么意思阿?其实你可以在doIt加一个参数,将target传过来不就行了吗,这样就不必使用这来遍历阿!!!!

顶部
nanjinghhu
新手上路
Rank: 1



UID 9381
精华 0
积分 0
帖子 7
阅读权限 10
注册 2008-6-18
状态 离线
发表于 2008-6-19 01:37  资料  个人空间  短消息  加为好友  添加 nanjinghhu 为MSN好友 通过MSN和 nanjinghhu 交谈
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" c/>
    <title>Multi File Upload</title>

<style>
#mUpload {
width: 100%;
border: 1px solid red;
}
.gone { display: none; }
.back { display: block; }
</style>
<script src="jquery-1.2.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
        var filesMax = $("input[@type=file]").size();
        $('#asdf').append('<div id="files_list" style="border:1px solid black;padding:5px;background:#fff;font-size:normal;"><strong>Files (maximum '+filesMax+'):</strong></div>');
        $('#mUpload br').remove();
        $("input[@type=file]").each(function(i){
                $(this).change(function(){
                        doIt($(this));
                });
                if(i>0) $(this).hide();
                else $(this).addClass('edited');
        });
        $('#send').click(function(){
                alert('Demonstration Only: file upload disabled');
        });
});
function doIt(target) {
        var fileName = target.val();
        alert(fileName);
        var a=n+1;
        //$("input[@type=file]:nth-of-type("+n+")").after('<span id="edit'+n+'">'+fileName+'(click to edit)</span>').hide();
        //$("input[@type=file]:nth-of-type("+a+")").not('.edited').show().before('<br>').addClass('edited');
       target.after('<span id="edit'+n+'">'+fileName+'(click to edit)</span>').hide();
        target.not('.edited').show().before('<br>').addClass('edited');
        $("#edit"+n).click(function(){
                $(this).remove();
                target.show();
        });
        countFiles();
}
function countFiles() {
        var filesMax = $("input[@type=file]").size();
        var filesUsed = 0;
        $("input[@type=file]").each(function(i){
                if($(this).val() != '') filesUsed++;
        });
        var filesLeft = filesMax-filesUsed;
        $('#files_list').html('<strong>'+filesUsed+' files chosen('+filesLeft+' remaining) </strong>');
}
</script>
   
</head>
<body>
<h1>Multiple File Upload</h1>

<form action="test.php" method="post" enctype="multipart/form-data" name="asdf" id="asdf">
  <div id="mUpload">
  <p>
<input type="file" class="upload" name="fileX[]" /><br />
<input type="file" class="upload" name="fileX[]" /><br />
<input type="file" class="upload" name="fileX[]" /><br />
    </p>
<input type="button" name="Submit" value="Submit" id="send" />
  </div>
</form>


</body>
</html>

[ 本帖最后由 nanjinghhu 于 2008-6-19 01:38 编辑 ]

顶部
 



当前时区 GMT+8, 现在时间是 2008-11-21 08:28
鲁ICP备05039777号

    本论坛支付平台由支付宝提供
携手打造安全诚信的交易社区 Powered by Discuz! 5.5.0  © 2001-2007 Comsenz Inc.
Processed in 0.024907 second(s), 6 queries , Gzip enabled

清除 Cookies - 联系我们 - jQuery中文社区 - Archiver - WAP