layui 上传图片校验
生活随笔
收集整理的這篇文章主要介紹了
layui 上传图片校验
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
layui地址[添加鏈接描述](https://www.layui.com/doc/modules/upload.html)
var uploadInst = upload.render({elem: '#test2',accept: 'images',multiple:false,auto: false, url: '{:url("upload/uploadImg")}' //改成您自己的上傳接口,auto: false //,choose: function(obj){ //上傳前選擇回調(diào)方法var flag = true;// https://www.layui.com/doc/modules/upload.htmlobj.preview(function(index, file, result){// console.log(file); //file表示文件信息,result表示文件src地址var img = new Image();img.src = result;img.onload = function () { //初始化夾在完成后獲取上傳圖片寬高,判斷限制上傳圖片的大小。console.log(img.width+'寬度');console.log(img.height+'高度');if(img.width <= 1000){$('#demo2').attr('src', result);obj.upload(index, file); //滿足條件調(diào)用上傳方法}else{flag = false;// layer.msg("您上傳的圖片最短邊至少50px,最長邊最大4096px!");layer.alert("上傳海報圖片寬度不可大于1000px", { icon: 5, title: "提示", offset: "auto", skin: 'layui-layer-molv' });return false;}}return flag;});}, done: function (res) {//如果上傳失敗if (res.code > 0) {return layer.msg('上傳失敗');}//上傳成功$('input[name="thumb"]').val(res.data)}, error: function () {//演示失敗狀態(tài),并實現(xiàn)重傳var demoText = $('#demoText2');demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');demoText.find('.demo-reload1').on('click', function () {uploadInst.upload();});}});
總結(jié)
以上是生活随笔為你收集整理的layui 上传图片校验的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql 数据库存储表情
- 下一篇: kostal是什么公司