调试教程中例子的时候出现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>