简单多图片上传 jquery+java 代码

<script type="text/javascript">

/** 添加歌曲  */
function addSong(){
	var id=$("#_activity_id").val();
	window.location.href = "${pageContext.request.contextPath}/html5/song_search.action?activityId="+id;
}

/** 删除歌曲  */
function deleteSong(activityId, songId){
	window.location.href = "song_delete.action?activityId="+activityId+"&songId="+songId;
}

/***保存详情**/
 function saveDetails(){

	var activityId= $("input[name='activityId']").val() 

	if(activityId==""){
		alert("没有活动id");
		return ;
	}

	var title= $("input[name='title']").val() 

	if(title==""){
		alert("请填写标题");
		return ;
	}

	var iconText= $("input[name='iconText']").val()
	if(iconText==""){
		alert("请填写icon文字");
		return;
	}

	var rule = $('input[name="rule"]:checked').val();
	if(rule==""){
		alert("评选规则为空");
		return ;
	}

	var about= $("textarea[name='about']").val()
	if(about==""){
		alert("请填写简介");
		return ;
	}

	var claim= $("textarea[name='claim']").val()
	if(claim==""){
		alert("请填写要求");
		return ;
	}

	var other= $("textarea[name='other']").val()
	if(other==""){
		alert("请填写其它");
		return ;
	}
	var data="activityId="+activityId;
	    data+="&title="+title;
	    data+="&iconText="+iconText;
	    data+="&rule="+rule;
	    data+="&about="+about;
	    data+="&claim="+claim;
	    data+="&other="+other;

        //图片处理----------------------------------------------------------------------------------------
		var imgurl="";
		 //取新增的图片
		 var obj = $("input[name='imgUrl_input']");
		  for(var i=0;i<obj.length;i++)
		  {
			  if(obj[i].value!=""&&obj[i].value != "undefined" ){
				  var url=obj[i].value;
				  url= url.substring (parseInt(url.lastIndexOf("/"))+1,url.length);
				  //imgurl+=("&"+url);
				  data+=("&url="+url);
			  }
		  }
		 // alert(imgurl);
		  //取修改的图片
		var updateImgUrl="";
		var updaet_img = $("input[name='update_img_imgUrl0']");
		  for(var i=0;i<updaet_img.length;i++)
		  {
			  //console.log(updaet_img[i]);
			  if(updaet_img[i].value!=""&&updaet_img[i].getAttribute("urlstr")!="" && typeof(updaet_img[i].getAttribute("urlstr")) != "undefined"){
				  var url=updaet_img[i].getAttribute("urlstr");
				  url= url.substring (parseInt(url.lastIndexOf("/"))+1,url.length);
				  updateImgUrl=updaet_img[i].value+"-"+url;
				  data+=("&updateUrl="+updateImgUrl);
			  }
		  }

	   // data+="&prize.url=aaaa&prize.url=bbbb";
	  //  data+="&url=aaaa&url=bbbb";
	  //  data+="&updateUrl=aaaa&updateUrl=bbbb";
	    sendAjax("${pageContext.request.contextPath}/html5/saveDateils.action",data);

}

function sendAjax(url,data){
	//alert(data);
	 $.ajax({
		  type: "POST",
		  url: url,
		  dataType: "json",
		  cache: false,
		  data: data,
		  success: function(returnData){
		   alert(returnData.mess);
		  },
		  error:function(XMLHttpRequest, textStatus, errorThrown){
			  alert("发生异常");
		  }
		});
}

/**
 * 图片上传
 */
function uploadImages(type, fieldName, tdId,update_img_imgUrl0) {
	  $.ajaxFileUpload({
		  type:"POST",
	  		//跟具updateP得到不同的上传文本的ID
         url:'uploadImg.action?uploadId='+type,             //需要链接到服务器地址
         secureuri:false,
         fileElementId:type,                         //文件选择框的id属性（必须）
         dataType: 'json',
         success: function (data, status){
        	 var filePath = data.filePath;

        	 if(filePath.indexOf("too_large")>=0) {
        		 alert("上传文件太大!");
        	 } else if(filePath.indexOf("error")>=0) {
        		 alert("上传出错!");
        	 } else {
        		 $("#"+fieldName).val(filePath);
	        	 $("#"+tdId+"_img").attr("src","http://s3.kgimg.com/v2"+filePath);
	        	 $("#"+update_img_imgUrl0).attr("urlstr",filePath);
// 	        	 $("#"+tdId+"_img").remove();
// 	        	 $("#"+tdId).prepend('<img id="'+tdId+'_img" src="http://s3.kgimg.com/v2'+filePath+'" width="50px" height="50px"/>');
        	 }
         },
         error: function(data, status, e){
        	var status = String(status);
			if(status == 'error') {
				getologin();
			}
         }
	  });
}

/***添加标签***/
 function addGiftInput(){

	var nameN=$("#_inputGenSize").val();
	 var nameN=parseInt(nameN)+1;

	var html='<div id="imgGift0'+nameN;
	html += '">  <img id="imgGift0'+nameN;
	html +='_img" src="" width="50px" height="50px"/>';
	html +='<input type="hidden" name="imgUrl_input';
	html +='" id="imgUrl0'+nameN;
	html +='" value="" />';
	html += '<input type="file" id="imgUrl_file_0'+nameN;
	html += '" name="imgUrl_file_0'+nameN;
	html +='"/>';
	html +='<input type="button" value="上传图片" class="btn control" onClick="uploadImages(\'imgUrl_file_0'+nameN;
	html +='\',\'imgUrl0'+nameN;
	html +='\',\'imgGift0'+nameN;
	html +='\')"/> <input type="button" value="删除" class="btn control" onClick="delImagesInput(\'imgGift0'+nameN+'\')"/> </div>';

     $("#_add_gift_td").prepend(html);

     $("#_inputGenSize").val(nameN);

}

/***delImagesInput删除标签****/
function delImagesInput(id){
	var idj="#"+id;
	 //alert(idj);
	 $(idj).remove();

}

/***删除图片****/
function delImages(id,divId){
	//var activityId=$("#_activity_id").val();
	alert(id);
	var data="id="+id;
   $.ajax({
		  type: "POST",
		  url: "${pageContext.request.contextPath}/html5/delete_gift.action",
		  dataType: "json",
		  cache: false,
		  data: data,
		  success: function(returnData){
			  alert(returnData.mess);
		   if(returnData.mess=="success"){
			   $("#"+divId).remove();
		   }
		  },
		  error:function(XMLHttpRequest, textStatus, errorThrown){
			  alert("发生异常");
		  }
		});

}

/****
 * 更新顺序
 */
 function updateSequence(){
	var sequNames=$("input[name='sequenceInput']");
	var songs=new Array();

	for(var i=0;i<sequNames.length;i++){
		var activitySong=new Object();
		//console.log(sequNames[i]);
		var sequid=sequNames[i].getAttribute("sequid");
		var sequ=sequNames[i].value;
		activitySong.id=sequid;
		activitySong.sequence=sequ;
		songs[i]=activitySong;
	}

	var jsonData=JSON.stringify(songs);
// var objx = eval('(' + jsonData + ')');
// alert(jsonData);

	 $.ajax({
		  type: "POST",
		  url: "${pageContext.request.contextPath}/html5/update_song_seq.action",
		  dataType: "json",
		//  contentType: "application/json",
		  cache: false,
		  data: "Songs="+jsonData,
		  success: function(returnData){
			  alert(returnData.mess);
		   if(returnData.mess=="success"){
		   }
		  },
		  error:function(XMLHttpRequest, textStatus, errorThrown){
			  alert("发生异常");
		  }
		});

}

</script>

 <tr>
        <td> 奖品:</td>
        <td id="_add_gift_td">

         <c:forEach items="${detail.prize}" var="prizeObj" varStatus="vst" >
		             <div id="imgGift0${vst.count}">
		                 <img id="imgGift0${vst.count}_img" src="http://s3.kgimg.com/v2/sing_img/${prizeObj.url}" width="50px" height="50px"/>
			             <!-- 用于更新 -->
			             <input id="update_img_imgUrl0${vst.count}" name="update_img_imgUrl0" clz="fff" value="${prizeObj.id}" urlstr=""  type="hidden"/>
			             <input type="hidden" name="imgUrl0${vst.count}" id="imgUrl0${vst.count}" value="${prizeObj.url}" />
				          <input type="file" id="imgUrl_file_0${vst.count}" name="imgUrl_file_0${vst.count}"/>
				          <input type="button" value="上传图片" class="btn control"
				          onClick="uploadImages('imgUrl_file_0${vst.count}','imgUrl0${vst.count}','imgGift0${vst.count}','update_img_imgUrl0${vst.count}')"/>
			       		 <input type="button" value="删除礼物" class="btn control" onClick="delImages(${prizeObj.id},'imgGift0'+${vst.count})"/>
			       	 </div>
		  </c:forEach>

		 <input type="hidden" value="${fn:length(detail.prize)}" id="_inputGenSize">
		 <input type="button" value="新增礼物" onclick="addGiftInput()">

        </td>

      </tr>

版权声明：本文为博主原创文章，未经博主允许不得转载。