huahuibao/app/admin/views/slide/list.php

<div class="page-title">
				
				<div class="title-env">
					<h1 class="title">首页图片</h1>
				</div>

					<div class="breadcrumb-env">
						<ol class="breadcrumb bc-1">
							<li>
								<a href="/"><i class="fa-home"></i>Home</a>
							</li>
							<li>
								<a href="javascript:void(0)">推荐管理</a>
							</li>
							<li class="active">
								<strong>首页图片</strong>
							</li>
						</ol>
					</div>
				</div>

			<div class="row">
				<div class="col-sm-12">
					<div class="panel panel-default">
						<div class="panel-body">
							<form role="form" class="form-horizontal" action="/slide/replace" id="form" method="POST">
							<input type="hidden" name="_csrf" value="<?= Yii::$app->request->csrfToken ?>" />
								<div class="form-group">
									<label class="col-sm-2 control-label">*图片Ⅰ：</label>
									<div>
										<div style="margin-left:16px;width:157px;height:160px;float:left;display:inline-block;float:left;">
											<div style="width:141px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="<?php if(!empty($list[0]['img'])){ echo Yii::$app->params['imgUrl'].$list[0]['img']; }else{ echo '/images/nopicture.png'; } ?>" name="slideImg1" style="width:128px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:javascript:void(0);" class="a-upload">
											<input type="file"  accept="image/*"  id="slideImg1" value="" />选择图片
											</a>
											<input class="slideList" type="hidden" name="slide[0][img]" value="<?php if(!empty($list[0]['img'])){ echo $list[0]['img']; } ?>"  />
											<p></p>
										</div>
									</div>								
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-1">链接：</label>
									<div class="col-sm-10">
										<input type="text" class="form-control urlList" name="slide[0][link]" placeholder="选填，如填写必须以 http 开头" value="<?php if(!empty($list[0]['link'])){ echo $list[0]['link']; } ?>">
										<p></p>
									</div>
								</div>
								<div class="form-group-separator"></div>

								<div class="form-group">
									<label class="col-sm-2 control-label">*图片Ⅱ：</label>
									<div>
										<div style="margin-left:16px;width:157px;height:160px;float:left;display:inline-block;float:left;">
											<div style="width:141px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="<?php if(!empty($list[1]['img'])){ echo Yii::$app->params['imgUrl'].$list[1]['img']; }else{ echo '/images/nopicture.png'; } ?>" name="slideImg2" style="width:128px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:javascript:void(0);" class="a-upload">
											<input type="file"  accept="image/*"  id="slideImg2" value="" />选择图片
											</a>
											<input class="slideList" type="hidden" name="slide[1][img]" value="<?php if(!empty($list[1]['img'])){ echo $list[1]['img']; } ?>" />
											<p></p>
										</div>
									</div>								
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-1">链接：</label>
									<div class="col-sm-10">
										<input type="text" class="form-control urlList" name="slide[1][link]" placeholder="选填，如填写必须以 http 开头" value="<?php if(!empty($list[1]['link'])){ echo $list[1]['link']; } ?>">
										<p></p>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">*图片Ⅲ：</label>
									<div>
										<div style="margin-left:16px;width:157px;height:160px;float:left;display:inline-block;float:left;">
											<div style="width:141px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="<?php if(!empty($list[2]['img'])){ echo Yii::$app->params['imgUrl'].$list[2]['img']; }else{ echo '/images/nopicture.png'; } ?>" name="slideImg3" style="width:128px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:javascript:void(0);" class="a-upload">
											<input type="file"  accept="image/*"  id="slideImg3" value="" />选择图片
											</a>
											<input class="slideList" type="hidden" name="slide[2][img]" value="<?php if(!empty($list[2]['img'])){ echo $list[2]['img']; } ?>" />
											<p></p>
										</div>
									</div>								
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-1">链接：</label>
									<div class="col-sm-10">
										<input type="text" class="form-control urlList" name="slide[2][link]" placeholder="选填，如填写必须以 http 开头" value="<?php if(!empty($list[2]['link'])){ echo $list[2]['link']; } ?>">
										<p></p>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group" style="text-align:center;">
									<button type="button" name="replace" class="btn btn-info btn-single">确认</button>
								</div>								
							</form>						
						</div>
					</div>
				</div>
			</div>

<!-- footer -->
<?php 
use backend\widgets\FooterWidget;
?>
<?= FooterWidget::widget()?>
<!-- footer -->

<script src="/js/lrz/dist/lrz.bundle.js"></script>

<script>


document.querySelector('#slideImg1').addEventListener('change', function () {
	//参数说明 https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3
	lrz(this.files[0],{
		width: 1000,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		fieldName:'Filedata',//文件名
		quality:1,//图片质量 0.1 - 1
		})
        .then(function (rst) {
            // 处理成功会执行
        	rst.formData.append('fileLen', rst.fileLen);
        	rst.formData.append('_csrf', '<?= Yii::$app->request->csrfToken?>');
        	$.ajax({
        		//url: '/main/img', // 这个地址做了跨域处理，可以用于实际调试
        	    url: '/upload/upload-file', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=slideImg1]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='slide[0][img]']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});


document.querySelector('#slideImg2').addEventListener('change', function () {
	//参数说明 https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3
	lrz(this.files[0],{
		width: 1000,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		fieldName:'Filedata',//文件名
		quality:1,//图片质量 0.1 - 1
		})
        .then(function (rst) {
            // 处理成功会执行
        	rst.formData.append('fileLen', rst.fileLen);
        	rst.formData.append('_csrf', '<?= Yii::$app->request->csrfToken?>');
        	$.ajax({
        		//url: '/main/img', // 这个地址做了跨域处理，可以用于实际调试
        	    url: '/upload/upload-file', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=slideImg2]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='slide[1][img]']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});

document.querySelector('#slideImg3').addEventListener('change', function () {
	//参数说明 https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3
	lrz(this.files[0],{
		width: 1000,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		fieldName:'Filedata',//文件名
		quality:1,//图片质量 0.1 - 1
		})
        .then(function (rst) {
            // 处理成功会执行
        	rst.formData.append('fileLen', rst.fileLen);
        	rst.formData.append('_csrf', '<?= Yii::$app->request->csrfToken?>');
        	$.ajax({
        		//url: '/main/img', // 这个地址做了跨域处理，可以用于实际调试
        	    url: '/upload/upload-file', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=slideImg3]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='slide[2][img]']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});

$("button[name=replace]").click(function(){
	var status		= true;
	$(".slideList").each(function(){
		var img		= $(this).val();
		if(img.length <= 0){
			status	= false;
		}
	});
	if(status == false){
		xhPopMsg('三张图片都要上传');
		return;
	}
	$(".urlList").each(function(){
		var url = $(this).val();
		if(url.length > 0 && isUrl(url) == false){
			status	= false;
		}
	});
	if(status == false){
		xhPopMsg('链接填写有误');
		return;
	}
	$("#form").submit();
});

</script>