功能说明:
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}可以调出的是图片服务器的地址。
如图:
相关推荐
之前介绍过单个nii文件转换成png图像: https://www.jb51.net/article/165693.htm 这里介绍将多个nii文件(保存在一个文件夹下)转换成png图像。且图像单个文件夹的名称与nii名字相同。 import numpy as np import ...
1. 利用ITK-snap进行数据标注的图像保存为nii格式 2.nii转换成npy格式,这有利于模型更加方便的获取数据 3.实现nii与png的转换
使用文件内的nii_tool函数,可以方便完成多张图片转三维nii,代码请看我的文章。
[切片]CT、MRI(Nii)的切片处理(转2D图像) + 代码
该压缩文件添加到matlab工具包中,可以打开医学.nii格式图像的程序包
读取nii或者nii.gz文件中的信息,并且输出图像。 import matplotlib from matplotlib import pylab as plt import nibabel as nib from nibabel.viewers import OrthoSlicer3D file = '' #你的nii或者nii.gz文件...
用SimpleITK+pydicom 将4dnii图像转为单张dicom,并重新添加图像头信息!
nii格式医学图像查看器. MacOS版, m1可用. 外网下载,
这是NII格式批量转换的Python源码。下载解压后直接运行。
读取大量NII文件,并制作其mask,和 maskheader。去除噪声非脑组织
nii批量转mat和png
fMRI如何将4D-nii文件转化为3D-nii文件工具箱。操作流程可参考博客:https://blog.csdn.net/xj4math/article/details/123854657 第一步,下载该工具箱,双击dcm2niigui.exe打开页面 第二步,点击输出格式(Output ...
本程序包适用于再MATLAB环境下,对医学影像中.nii和.hdr格式的操作,包括读取、制作、保存等等。
1. 批量生成每张图片的标注结果文件夹(含 img.png, label.png, label_names.txt, label_viz.png) 2. 将所有.json 导出的标注文件夹中的 img.png, label.png 复制到相应的 img 和 label 文件夹中 3. 将 labelme 产生...
基于matlab的dicom、nii文件读取,去噪增强处理,里面包含了三张dicom的图像,三张nii的图像,需要的同学自己取,稍微收点积分意思意思
nii格式文件在MATLAB中的加载和使用,并三维nii格式文件GUI显示
主要介绍了Pytorch 使用 nii数据做输入数据的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Json解析 Nii.JSON.dll,Json解析 Nii.JSON.dll,Json解析 Nii.JSON.dll JSONObject jo = new JSONObject(); var json = jo.ConvertToJSONObject(text);
在matlab中想要处理nii格式的图像就需要Nifti包,不想去官网下的同学可以下我这个,matlab2016a和2019a都试过可以用
matlab读取nii,nifti toolbox