多文件上传，点击添加自动增加一行

里面的方法只是功能里头的一部分，主要是逻辑和一些关键的代码。见谅


//*****************************js上传图片的校验和添加效果*****************
$(function($){
addImgEvnt();
checkSubmit();
});

function addImgEvnt(){
        $("#addImgBtn").click(function(){
if($("#addImgBtn").next()!=null){//取消提示信息 最多只能添加5张图片
$("#addImgBtn").next().remove();
}
var i=$("#addDiv").index();
if(i<=4){
addImgInput(i);
}else{
$("#addImgBtn").after("<font color='red'>最多只能添加5张图片</font>");
}
});
}

function checkPic(value) {
    var picPath = value;
    var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length).toLowerCase();
    if (type != "jpg" && type != "bmp" && type != "gif" && type != "png"&& type != "jpeg") {
        alert("请上传正确的图片格式");
        return false;
    }
    return true;
}

//添加图片上传
function addImgInput(i){
var htmlInput;
htmlInput="<div class='b1' id=\"addImg_"+i+"\"><div class='bdmain'>  <input type='text' class='input_out_short' name='pk_img' id=\"img_"+i+"\"/>"+
"<div class='other'><div class='yanzhengma'><input type='button' class='fileImgs'/>"+
     "<input type='file' class='files' name='myFile' value='浏览' onchange=\"uploadImages(this,'img_"+i+"');\"/></div><a class='deleteImagesA' onclick=\"deleteImgInput('addImg_"+i+"',"+"'img_"+i+"');\">取消</a></div></div>";
$("#addDiv").before(htmlInput);
}

//取消
function deleteImgInput(id,preid){
$("#"+id).remove();//取消图片上传
//$("#pre_"+preid).remove();//取消预览图片
$("#pre_"+preid).parent().html('<img id="pre_'+preid+'" src="/image/index/zanwu.jpg"/>');//取消预览图片
if($("#divhead_"+preid)!=null){
$("#divhead_"+preid).parent().html('<img id="pre_'+preid+'" src="/image/index/zanwu.jpg"/>');//取消预览图片
$("#divhead_"+preid).remove();
}
if($("#addImgBtn").next()!=null){//取消提示信息 最多只能添加5张图片
$("#addImgBtn").next().remove();
}
}

function checkSubmit(){
$("#profile").focus(function(){
checkIMG("图片","img_one");
});
$("#FacBtn").click(function(){
if(check("园区描述","profile")){
$("form:first").submit();
}
});
}

//*****************************上传图片HTML***************************
<div class="tit">
      <em>*</em>厂房图片
</div>
<div class="includ">
    <div class="b1">
        <div class="bdmain" id="firstImg">
           <input type="text" name="f_img" id="img_0" class="input_out_short" onfocus="if(this.value==defaultValue) {this.value='';this.style.borderColor='#1e82de'}" onblur="if(!value) {value=defaultValue; this.style.borderColor='#e8e8e8'}" value="最多5张"/>
<div class="other">
   <div class="yanzhengma">
      <input type="button" class="fileImgs"/>
          <input  type="file" name="myFile" value="浏览"  class="files" onchange="uploadImages(this,'img_0');"/>
   </div>
</div>
      </div>
    </div>
   <div class="tianjia" id="addDiv"><a id="addImgBtn">添加</a></div>
</div>


//*****************************上传图片action方法***************************
// 循环上传
StringBuffer imgs = new StringBuffer();
   for (int i = 0; i < myFile.size(); i++) {
imageFileName.add(new Date().getTime() + i +   getExtention(this.getMyFileFileName().get(i)));
// 得到图片保存的位置(根据root来得到图片保存的路径在tomcat下的该工程里)
File imageFile = new File(ServletActionContext.getServletContext()
.getRealPath("image/UploadImages") + "/"+ imageFileName.get(i));
copy(myFile.get(i), imageFile); // 把图片写入到上面设置的路径里
String img = imageFileName.get(i);
imgs.append(img).append(";");
     }
   factory.setF_image(imgs.toString().substring(0, imgs.length() - 1));


// 上传图片
private static void copy(File src, File dst) {
     try {
InputStream in = null;
OutputStream out = null;
try {
   in = new BufferedInputStream(new FileInputStream(src),BUFFER_SIZE);
   out = new BufferedOutputStream(new FileOutputStream(dst),BUFFER_SIZE);
   byte[] buffer = new byte[BUFFER_SIZE];
   while (in.read(buffer) > 0) {
out.write(buffer);
   }
} finally {
    if (null != in) {
in.close();
    }
   if (null != out) {
out.close();
   }
}
     } catch (Exception e) {
e.printStackTrace();
     }
}

// 获得文件的后缀名
private static String getExtention(String fileName) {
int pos = fileName.lastIndexOf(".");
return fileName.substring(pos);
}