利用SA FileUp组件进行多文件上传

技术  /  管理员 发布于 7年前   166

大家可以根据自己的实际情况进行修改，特别是数据库操作部分。
============================================
利用稻香老农的无组件进行多文件上传
请见：
http://bbs.blueidea.com/viewthread.php?tid=1249535
==================================================
本例属于文件和表单项的混合提交。

简单说明：
虽然重点在处理页上，但我觉得有必要介绍一下表单的项目。
本例是相册里像片的上传。
其中的groupID是隐藏域传递的大类的ID
其中的albumID是隐藏域传递的小类的ID
file1-->>file5是文件
photoTitle1-->>photoTitle5 是像片的标题
photoIntro1-->>photoIntro5 是像片的简介
photoWidth1-->>photoWidth5 是像片的宽度
photoHeight1-->>photoHeigth5 是像片的高度
photoSize1-->>photoSize5 是像片的大小。

注意：因本人没有声明变量的习惯，所以大家要是强制声明变量的话，就得自己加了。
===========================================

提交页：主要代码如下
<form name="fileForm" method="post" action="photo_savephoto.asp" enctype="multipart/form-data" onSubmit="return checkForm();">

<INPUT name="groupID" type="hidden" id="groupID" value="<%=groupID%>" size="10">
<INPUT name="albumID" type="hidden" id="albumID" value="<%=albumID%>" size="10">

  上传说明：最多可以同时上传五个文件，其中标题最多30字，简介200字。

<table width="96%" align="center" cellpadding="4" cellspacing="2">
    <tr align="center" valign="middle">
      <td align="left" bgcolor="#F4CECE" id="upid">文件1</td>
      <td height="29" align="left" bgcolor="#F4CECE" id="upid">            <INPUT name="file1" type="file" class="myInput" size="20">
        宽： <INPUT name="photoWidth1" type="text" class="input-disabled" id="photoWidth1" size="5" readonly="">
          高： <INPUT name="photoHeight1" type="text" class="input-disabled" id="photoHeight1" size="5" readonly="">
          大小：<INPUT name="fileSize1" type="text" class="input-disabled" id="fileSize1" size="5" readonly="">         
      </td>
    </tr>
    <tr align="center" valign="middle">
      <td colspan="2" align="left" bgcolor="#FDF2F2" id="upid">
        标题： <INPUT name="photoTitle1" type="text" class="myInput" id="photoTitle1" size="40">
          <BR>        
        简介：<TEXTAREA name="photoIntro1" cols="60" rows="5" class="myInput" id="photoIntro1"></TEXTAREA>
      </td>
      </tr>

。。。。。。。

    <tr align="center" valign="middle" bgcolor="#F4CECE">
      <td height="24" colspan="2">
        <input name="Submit" type="submit" class="myButton" value="开始上传">
        <input name="Submit2" type="reset" class="myButton" value="重新填写">
      </td>
      </tr>
  </table>
</form>
下面的script是我用来检查图片属性的。其中检查了图片的宽度，高度，大小，是否是图片。

<SCRIPT language="JavaScript">
<!--
       var upFileSize=<%=upFileSize%>;
//-->
</SCRIPT>

<SCRIPT language="JavaScript" src="https:/article/photo_addphoto.js"></SCRIPT>

<TABLE width="98%"  border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
  <TR>
    <TD height="1"><img src="https:/article/images/add.gif" id="loadPhoto" onload="if(!firstLoad)showInfo();"></TD>
  </TR>
</TABLE>


photo_addphoto.js

var firstLoad=true;var mycount;function checkForm(){var filePath;var fileNumber=0; //想上传的文件个数for(mycount=1;mycount<=5;mycount++)if(eval("fileForm.file"+mycount+".value!=''")) //检查文件后缀、标题和简介{eval("filePath=fileForm.file"+mycount+".value;")if(isPic(filePath,mycount)==false)return false;if(eval("fileForm.photoTitle"+mycount+".value==''") || eval("fileForm.photoTitle"+mycount+".value.length>30")){alert("第"+mycount+"个相片的标题为空或超过30字!");return false;}if(eval("fileForm.photoIntro"+mycount+".value==''") || eval("fileForm.photoIntro"+mycount+".value.length>200")){alert("第"+mycount+"个相片的简介为空或超过200字!");return false;}fileNumber++;}if(fileNumber==0){alert("你没有选择任何一个图片文件！不能提交！");return false;}return photoInfo(); //检查图片属性，提交表单}function photoInfo(){//fileForm.submit.disabled=true;mycount=0;photoInfo2(); //共执行5次photoInfo2()for(var i=1;i<=4;i++){setTimeout("photoInfo2()",i*500);}setTimeout("checkFileSize()",3000);return false;}function photoInfo2(){firstLoad=false;mycount++;if(eval("fileForm.file"+mycount+".value!=''"))eval("loadPhoto.src=fileForm.file"+mycount+".value;");elseeval("fileForm.fileSize"+mycount+".value='no';");}function showInfo(){eval("fileForm.photoWidth"+mycount+".value=loadPhoto.offsetWidth;");eval("fileForm.photoHeight"+mycount+".value=loadPhoto.offsetHeight;");eval("fileForm.fileSize"+mycount+".value=loadPhoto.fileSize;");}function isPic(filePath,mycount){var temp;var ExtList = ".jpg.gif.bmp.png";var the_ext = filePath.substr(filePath.lastIndexOf(".")+1).toLowerCase();if (ExtList.indexOf(the_ext)==-1){alert("第"+mycount+"个文件不是图片，请选择图片文件！");return false;}return true;}function checkFileSize(){for(mycount=1;mycount<=5;mycount++)if(eval("fileForm.fileSize"+mycount+".value")>upFileSize) //upFileSize 来自于photo_addphoto.asp{alert("第"+mycount+"个文件大于"+Math.round(upFileSize/1024)+" KB！");return false;}fileForm.Submit.disabled=true;fileForm.submit(); //提交表单}
 提示：您可以先修改部分代码再运行