NII 单张图片AJAX上传+图片预览

功能说明：

1.适用于系统管理、卖家中心等后台。

2.点击控件会立即进行AJAX上传，上传成功后可以通过后台返回图片的保存路径和访问地址给前台进行预览图片。

3.在编辑页面此控件可以通过value设置预览图片的访问地址。

4.建议上传图片时将上传的Model属性和保存到数据库中的属性进行分开，因为ajax上传后返回存储值由于js安全机制无法直接赋值给type='file'的控件，所以需要额外有个隐藏域来保存此值，例如：属性"brand_logo"用于存储保存到数据库中的值，而"brand_logo_file"用于ajax上传。

 

使用说明：

1.前端需调用上传单张图片时可以用此控件，前端表单调用：

 

{input type='file-image' model=$model field='brand_logo_file' data-image="{imageurl}/{$model->brand_logo}" data-file="此处为type=“file”的Id"}
{input type='hidden' model=$model field='brand_logo'  }

2.页面中引入JS：

 

 

<!-- AJAX上传+图片预览 -->
{script src='@static/js/upload/jquery.ajaxfileupload.js,@static/js/pic/imgPreview.js'}

3.编写上传的JS脚本

 

 （1）上传单张图片，无需指定特殊目录的情况下可以调用封装好的JS函数，如下：

//单图AJAX上传 + 上传后预览图片
var fileElementId = "{inputId($model, 'brand_logo_file')}";
var fieldElementId = "{inputId($model, 'brand_logo')}";
$("body").on("change", "#" + fileElementId, function() {
	if ($("#" + fileElementId).val().length > 0 && $(this).valid()) {
		$.ajaxFileImageUpload({
			fileElementId: fileElementId,
			fieldElementId: fieldElementId
		});
	}
	return true;
});

 

 

 （2）上传单张图片，如果需要对上传文件进行特殊处理，比如保存到指定目录下，可以调用如下完整版：

 // 单图AJAX上传 + 上传后预览图片
$("body").on("change", "#{inputId($model, 'brand_logo_file')}", function() {
	if ($("#{inputId($model, 'brand_logo_file')}").val().length > 0 && $(this).valid()) {
		$.ajaxFileUpload({
			url: 'upload',
			fileElementId: "{inputId($model, 'brand_logo_file')}",
			dataType: 'json',
			success: function(result, status) {
				if (result.code == 0 && result.data) {
					var url = result.data.url;
					var value = result.data.value;
					$("#{inputId($model, 'brand_logo_file')}_image").attr("ref", url);
					$("#{inputId($model, 'brand_logo')}").val(value);
				} else if (result.message) {
					// 显示错误信息
					$.validator.showError($("#{inputId($model, 'brand_logo_file')}"), result.message);
				}
			},
		});
	}
	return true;
});

4.编写后台上传PHP代码：

public function actionUpload ()
	{
		$model = new BrandModel();
		$model->load();
		
		$result = $model->validate([
			'brand_logo_file'
		]);
		
		// 验证图片
		if($result)
		{
			$file = $model->brand_logo_file;
			//图片目录
			$dir = format('/brandlogos/{0,date,yyyy/MM/dd/}', [
				time()
			]);
			//保存图片
			$file->saveAs('@imagepath' . $dir);
			//返回图片存入数据库的值和访问的web地址
			return Result::json([
				'data' => [
					'url' => alias('@imageurl' . $dir . $file->filename), 
					'value' => $dir . $file->filename
				]
			]);
		}
		else
		{
			return Result::json([
				'code' => '-1', 
				'message' => $model->getFirstError('brand_logo_file')
			]);
		}
	}

 

参数说明：

1.type='file-image' 上传单图

2.model=$model 指定Model

3.field='brand_logo' 指定属性

4.value='' 如果未设置或者为空则初始化时无图片预览功能，不为空则为图片预览的地址。

5.data-image=''与value的作用一致。

6.{imageurl}可以调出的是图片服务器的地址。

 

 

 

如图：