今天写了一个上传用户图标的功能,可以预展示选择要上传的图标,给导入前增加了函数处理,很好玩。把代码分享一下,其实很简单。功能如下图
代码如下:
Html代码
<div style="margin-top: 20px;" >
<label class="layui-form-label">产品图标:</label>
<div class="layui-input-block">
<button id="file_choose" type="button" class="xdja-btn">上传图片</button>
<img id="sample" src="" alt="">
<button id="file_upload" type="button" class="xdja-btn" lay-filter="importFilter">导入</button>
</div>
</div>
javascript代码
//上传文件相关
var loadId; //加载图
$timeout(function () {
layui.upload.render({
elem: '#file_choose', //选择上传图片按钮
url: Constants.baseUrl + 'fileupload', //上传图片接口
auto: false, //不设置自动上传
accept: 'images', //限制只能上传图片
bindAction:'#file_upload', //导入图片按钮
choose: function (obj) { //导入前选择回调方法,选择图片后页面展示选择的图片
//预读本地文件示例,不支持IE8
obj.preview(function(index, file, result){
$('#sample').attr('src',result);
});
},
done: function(res, index, upload){ //图片导入
if(res.status == 2){
return layer.msg('上传失败');
}else{
$scope.product.productIcon = res.url; //导入成功后台返回图片路径
layer.msg('导入图标成功');
}
layer.close(loadId); //加载动图不再显示
$scope.$digest();
}
,error: function(msg,index, upload){ //导入失败,导入按钮编程重试按钮,加载动图不再展示
$('#file_upload').text('重试');
layer.close(loadId);
}
});
},200);