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

这篇博客介绍了一个使用jQuery和Java实现批量上传图片的功能。通过JavaScript验证表单信息,处理上传的新增和修改的图片,利用ajaxFileUpload插件进行文件上传,并通过后端接口保存数据。
摘要由CSDN通过智能技术生成

/** 添加歌曲 */

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

{

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

{

//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('v2'+filePath+'');

}

},

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='

html += '"> ';

html +='';

html += '';

html +='

';

$("#_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

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("发生异常");

}

});

}

奖品:

%24%7BprizeObj.url%7D

onClick="uploadImages('imgUrl_file_0${vst.count}','imgUrl0${vst.count}','imgGift0${vst.count}','update_img_imgUrl0${vst.count}')"/>

0818b9ca8b590ca3270a3433284dd417.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值