for循环ajax
async: false,默认是true异步, 设置成false同步,同步会锁定浏览器执行,ajax不执行完不会执行下面的JavaScript脚本;
例:
/* 比如ajax上传多个图片 核心代码片段 */
var imgNameS = "";
function submit(){
var imgCountS = $('#imgCount').val();//所有图片数量
for(var i = 0; imgCountS > i ; i++){
ajaxUploadImg(i+1,imgCountS);
}
if(imgNameS == ""){
alert('图片上传');
return false;
}
//$("#imgNameS").val(imgNameS);
//TODO......之后再ajax提交其他信息即可
}
//循环上传图片 返回生成的图片名称
function ajaxUploadImg(id,imgCountS){
$.ajax({
async: false,//同步
type: "POST",
url: '/express/ajaxUploadImg.action',
data:{imgNameBase64:$("#imgId"+id).val()},
success: function(data){
imageS = [];//提交之后清空
//如果是客服录入,刷新页面加载id的值.
if(data.status=="success"){
//alert(data.msg);
if(id==imgCountS) {
imgNameS += data.imgName;
}else {
imgNameS += data.imgName+";";
}
}else{
alert(data.msg);
imgNameS = "";
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("第"+(i+1)+"张图片太大了");
imgNameS = "";
}
});
}
function lookImg(){
//判断类型是不是图片
var f = $("#fb").next().find('input[type=file]')[0];
var fileName = getFileName($("input[name='goods_img']").val());
var fileEnd = fileName.substring(fileName.indexOf("."));
//alert(fileName);
//上传文件格式判断
if (fileEnd != ".png" && fileEnd != ".jpeg" && fileEnd != ".jpg") {
alert("请确保文件为图像类型,png,jpeg,jpg");
return false;
}
if (f.files && f.files[0]){
for(var i=0;i<f.files.length;i++){
var reader = new FileReader(f.files[i]);
reader.onload = function(e){
if($(".imgId").length>4){
alert("图片暂不能超过5个");
return false;
}
//append为在元素中的末尾添加内容
$('#addImage').append("<img class='imgId' src='"+e.target.result+"'width='50px;' height='50px;'/>");
var count = $(".imgId").length;
//alert(count);
var ids = count;
$('#imgCount').val(count);
var imgId = 'imgId'+ids;
$('#addImage2').append("<input class='imgIdVal' type='hidden' id='"+imgId+"' value='"+e.target.result+"' sytle='display:none;'/>");
}
reader.readAsDataURL(f.files[i]);
}
}
}
function getFileName(o){
var pos=o.lastIndexOf("\\");
return o.substring(pos+1);
}HTML:
<input id="fb" class="easyui-filebox" name="goods_img" style="width:200px;" data-options="label:'图片上传',prompt:'选择图片(2M以内)',onChange:lookImg,multiple:true"> <div style="margin-bottom:20px;margin-left:50px;"id="addImage"></div> <#-- 隐藏的转换过的base64 图片 或者图片--> <div style="margin-bottom:20px;margin-left:50px;"id="addImage2"></div>
注:中间遇到过坑 比如 前端控制台报错 Illegal invocation、、、原因是 参数不对 或者 后台接收没有配置相应的接收参数名(struts框架)