19
2019
06

for 循环 ajax 多图上传

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框架)


« 上一篇 下一篇 »