JQUERY +js 上传图片问题

上传图片button很难点出file对话框，用alert测试，结果显示页面初始化时，所有button都已调用了function uploadImg() 方法并获得button相关属性js 包名为ajaxupload.3.6.js + jquery-1.2.6.js + jquery-ui-personalized-1.5.3.js一下是部分js代码：function uploadImg(btnId,area,id){
var button = $(btnId), interval;
new AjaxUpload(button,{
action: 'fileupload?flag=5&area='+area+'&folds='+eval("document.form"+area+".folds"+area+".value")+'&id='+id, 
name: 'myfile',
onSubmit : function(file, ext){
if (! (ext && /^(jpg)$/.test(ext))){
                        
                        alert('格式为.JPG');
                        return false;
                }
button.text('正在上传');
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 7){
button.text(text + '.');
} else {
button.text('正在上传');
}
}, 200);
},
onComplete: function(file, response){
button.text('已上传');
window.clearInterval(interval);
this.enable();

     if ($(response).find("result").children("ret").text()=="failure"){
var err = $(response).find("result").children("code").text();
if ('1'==err || '3'==err)
alert('请选择图片');
else if('2'==err)
alert('图片太大，无法上传');
else if('4'==err)
alert('图片保存失败，请联系网站管理员');
     }
}
});

}

function up(obj,area,id){
uploadImg(obj,area,id);
}

function addItem(id) {
var detailTable = document.getElementById("detailTable"+id);
if(detailTable.rows.length>10){
alert("不能超过10条记录");
return;
}
var oRow = detailTable.insertRow(-1);//在表格最后添加一行
var rows=detailTable.rows;
     var index=rows.length-1;
    
oCell = oRow.insertCell(0);
oCell.bgColor ="#eeeeee";
oCell.align="center";
oCell.innerHTML = index;
    
oCell = oRow.insertCell(1);
oCell.bgColor ="#eeeeee";
oCell.innerHTML = "<input onblur='checkNum(this)' onchange='checkNum(this)' id='recommendId"+id+index+"' name='recommendId' type='text' size='20' />";

oCell = oRow.insertCell(2);
oCell.bgColor ="#eeeeee";
oCell.innerHTML = "<a href='javascript:void(0);'  id='picBtn"+id+index+"'>上传图片</a>";

oCell = oRow.insertCell(3);
oCell.bgColor ="#eeeeee";
oCell.innerHTML = "<input name='button' type='button' value='删除' disabled='disabled' onclick='delItem(this,\""+id+"\")'  />";

uploadImg("#picBtn"+id+index,id,index);
}


function submitTo(id){
if(eval("document.form"+id+".title"+id+".value")==""){
alert("请先定义标签名");
return;
}
document.getElementById("form"+id).action="upLoad"+id+".shtml";
document.getElementById("form"+id).submit();
}$(document).ready(function(){
uploadImg("#picBtn81","8","1");
uploadImg("#picBtn82","8","2");
uploadImg("#picBtn83","8","3");
uploadImg("#picBtn84","8","4");
uploadImg("#picBtn85","8","5");
uploadImg("#picBtn86","8","6");
// uploadImg("#picBtn61","6","1");
// uploadImg("#picBtn62","6","2");
// uploadImg("#picBtn63","6","3");
// uploadImg("#picBtn64","6","4");
// uploadImg("#picBtn65","6","5");
// uploadImg("#picBtn66","6","6");
uploadImg("#picBtn71","7","1");
uploadImg("#picBtn72","7","2");
uploadImg("#picBtn73","7","3");
uploadImg("#picBtn74","7","4");
uploadImg("#picBtn75","7","5");
uploadImg("#picBtn76","7","6");

})

解决方案 »

  1.   

    以下是jsp 代码：
    <body >
    <form id="form1" name="form1" action="updateTitle.shtml" method="post" enctype="multipart/form-data">
    <input type="hidden" name="chan.createdAt" value="${requestScope.dateTime }" />
    <input type="hidden" name="chan.ip" value="${sessionScope.ip }" />
    <input type="hidden" name="folds6" value="${requestScope.folds6 }" />
    <input type="hidden" name="folds7" value="${requestScope.folds7 }" />
    <input type="hidden" name="folds8" value="${requestScope.folds8 }" />
    <table width="100%%" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
      <tr class="STYLE7">
        <td height="30" colspan="4" align="left" bgcolor="#CCCCCC" class="STYLE7">定义类别标签</td>
      </tr>
      <tr>
        <td width="34" height="30" align="center" bgcolor="#eeeeee">标签1</td>
        <td width="101" height="30" bgcolor="#eeeeee">现名：${requestScope.title6 }</td>
        <td width="140" height="30" bgcolor="#eeeeee"><input name="title6" type="text" size="12" /></td>
        <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">标签2</td>
        <td height="30" bgcolor="#eeeeee">现名：${requestScope.title7 }</td>
        <td height="30" bgcolor="#eeeeee"><input name="title7" type="text" size="12" /></td>
        <td height="30" bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">标签3</td>
        <td height="30" bgcolor="#eeeeee">现名：${requestScope.title8 }</td>
        <td height="30" bgcolor="#eeeeee"><input name="title8" type="text" size="12" /></td>
        <td height="30" bgcolor="#eeeeee">&nbsp;</td>
      </tr>
    </table>
    <table width="100%" border="0">
      <tr>
        <td height="69" align="center">&nbsp;&nbsp;&nbsp;&nbsp;
          <input name="button" type="submit" value="提交" /></td></tr>
    </table>
    </form><form id="form6" name="form6" action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="chan.createdAt" value="${requestScope.dateTime }" />
    <input type="hidden" name="chan.ip" value="${sessionScope.ip }" />
    <input type="hidden" id="folds6" name="chan.folds" value="${requestScope.folds6 }" />
    <input type="hidden" id="title6" name="chan.title" value="${requestScope.title6 }" />
    <p  class="STYLE7">标签1：${requestScope.title6 }   <span class="STYLE7"> 第 <span class="STYLE21">${requestScope.folds6 }</span> 期</span></p>
    <table id="detailTable6" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
      <tr class="STYLE7">
        <td width="35" height="30" align="center" bgcolor="#CCCCCC" class="STYLE7">序号</td>
        <td width="160" height="30" align="center" bgcolor="#CCCCCC"  class="STYLE7">作品ID</td>
        <td height="30" align="center" bgcolor="#CCCCCC" class="STYLE7">上传图片[尺寸：265x390]</td>
        <td bgcolor="#CCCCCC" class="STYLE7">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">1</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId61" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'6','1')"  id="picBtn61">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">2</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId62" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'6','2')" id="picBtn62">上传图片</a></td>
      <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">3</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId63" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'6','3')"  id="picBtn63">上传图片</a></td>
      <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">4</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId64" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'6','4')"   id="picBtn64">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">5</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId65" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'6','5')"   id="picBtn65">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">6</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId66" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'6','6')"   id="picBtn66">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
        <td height="69" align="center"><input name="button" type="button" value="新增一条" onclick="addItem('6')"/>
         &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="button" type="button" value="预览" />
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input name="button" type="button" value="提交" onclick="submitTo('6')" /></td>
      </tr>
      <tr><td align="center">[最多不要超过10条，不少于6条]</td></tr>
    </table>
    <div id="hid0606">&nbsp;</div>
    </form>
      

  2.   

    <form id="form7" name="form7" action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="chan.createdAt" value="${requestScope.dateTime }" />
    <input type="hidden" name="chan.ip" value="${sessionScope.ip }" />
    <input type="hidden" id="folds7" name="chan.folds" value="${requestScope.folds7 }" />
    <input type="hidden" id="title7" name="chan.title" value="${requestScope.title7 }" />
    <p  class="STYLE7">标签2：${requestScope.title7 }   <span class="STYLE7"> 第 <span class="STYLE21">${requestScope.folds7 }</span> 期</span></p>
    <table id="detailTable7" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
      <tr class="STYLE7">
        <td width="35" height="30" align="center" bgcolor="#CCCCCC" class="STYLE7">序号</td>
        <td width="160" height="30" align="center" bgcolor="#CCCCCC"  class="STYLE7">作品ID</td>
        <td height="30" align="center" bgcolor="#CCCCCC" class="STYLE7">上传图片[尺寸：265x390]</td>
        <td bgcolor="#CCCCCC" class="STYLE7">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">1</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId71" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'7','1')"  id="picBtn71">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">2</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId72" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'7','2')"  id="picBtn72">上传图片</a></td>
      <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">3</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId73" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'7','3')"  id="picBtn73">上传图片</a></td>
      <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">4</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId74" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'7','4')"  id="picBtn74">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">5</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId75" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'7','5')"   id="picBtn75">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">6</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId76" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);"  onmouseover="up(this,'7','6')"  id="picBtn76">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
        <td height="69" align="center"><input name="button" type="button" value="新增一条" onclick="addItem('7')"/>
         &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="button" type="button" value="预览" />
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input name="button" type="button" value="提交" onclick="submitTo('7')" /></td>
      </tr>
      <tr><td align="center">[最多不要超过10条，不少于6条]</td></tr>
    </table>
    <div id="hid0707">&nbsp;</div>
    </form><form id="form8" name="form8" action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="chan.createdAt" value="${requestScope.dateTime }" />
    <input type="hidden" name="chan.ip" value="${sessionScope.ip }" />
    <input type="hidden" id="folds8" name="chan.folds" value="${requestScope.folds8 }" />
    <input type="hidden" id="title8" name="chan.title" value="${requestScope.title8 }" />
    <p  class="STYLE7">标签3：${requestScope.title8 }   <span class="STYLE7"> 第 <span class="STYLE21">${requestScope.folds8 }</span> 期</span></p>
    <table id="detailTable8" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
      <tr class="STYLE7">
        <td width="35" height="30" align="center" bgcolor="#CCCCCC" class="STYLE7">序号</td>
        <td width="160" height="30" align="center" bgcolor="#CCCCCC"  class="STYLE7">作品ID</td>
        <td height="30" align="center" bgcolor="#CCCCCC" class="STYLE7">上传图片[尺寸：265x390]</td>
        <td bgcolor="#CCCCCC" class="STYLE7">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">1</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId81" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'8','1')"  id="picBtn81">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">2</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId82" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'8','2')" id="picBtn82">上传图片</a></td>
      <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">3</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId83" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'8','3')" id="picBtn83">上传图片</a></td>
      <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">4</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId84" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'8','4')" id="picBtn84">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">5</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId85" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'8','5')"   id="picBtn85">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="center" bgcolor="#eeeeee">6</td>
        <td height="30" bgcolor="#eeeeee"><input onblur="checkNum(this)" onchange="checkNum(this)" id="recommendId86" name="recommendId" type="text" size="20" /></td>
        <td height="30" bgcolor="#eeeeee"><a href="javascript:void(0);" onmouseover="up(this,'8','6')" id="picBtn86">上传图片</a></td>
       <td bgcolor="#eeeeee">&nbsp;</td>
      </tr>
      </table>
      <table width="100%" border="0">
      <tr>
        <td height="69" align="center"><input name="button" type="button" value="新增一条" onclick="addItem('8')"/>
         &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="button" type="button" value="预览" />
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input name="button" type="button" value="提交" onclick="submitTo('8')" /></td>
      </tr>
      <tr><td align="center">[最多不要超过10条，不少于6条]</td></tr>
    </table>
    <div id="hid0808">&nbsp;</div>
    </form>
    </body>

    期待高手的指点~！
      

  3.   

    我刚刚也实现了这个功能
    用后台控制的文件类型
    用了fileupload组件
      

  4.   

    其实form6，7，8都是一样的代码，别的页面都可以很轻松的点出file对话框，但是就是这个页面很难点...
      

  5.   

    没有异常，就是很难点出来那个file对话框
      

  6.   

    有对js 包名为ajaxupload.3.6.js + jquery-1.2.6.js + jquery-ui-personalized-1.5.3.js 比较熟悉的高手吗？帮我修改下filebutton的样式...