精华内容
下载资源
问答
  • //do something (比如将res返回的图片链接保存到表单的隐藏域) // 显示成功状态 layer.msg('上传成功', { time: 500 }); // 上传图片成功时,让img回显图片 layui.$('#uploadDemoView').removeClass('layui-hide')...
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>文件上传</title>
    		<style>
    			* {
                    margin: 0;
                    padding: 0;
                }
    
                html {
                    background-color: #000;
                    color: #fff;
                    border: none;
    				height: 100%;
    				width: 100%;
    				overflow: hidden;
                }
    				
    			body{
    				height: 100%;
    				width: 100%;
    				/* 设置旋转元素的基点位置: */
    				transform-origin: left top 0; 
    				background-image: url(http://192.168.31.113:8008/frame/assets/img/main-bg.jpg);
    				/* 将动画与 div 元素绑定: */
    				nimation: flymove 270s linear 1s infinite;
    				-webkit-animation: flymove 270s linear 1s infinite;
    			}
    			
    			/* 创建动画 */
    			@-webkit-keyframes flymove {
    			  0% {
    				background-position: 0; }
    			  100% {
    				background-position: 200%; } 
    			}
    			
                .layui-form-box,
                .layui-input-block>.layui-textarea,
                .layui-form-box>.layui-upload-drag {
                    background-color: #000;
                    filter: alpha(opacity=60);
                    background-color: rgba(0, 0, 0, .6);
                    color: #fff;
                    border: none;
                }
    
                .layui-form-box {
                    margin-top: 21px;
                }
    
                .layui-input-block>.layui-textarea,
                .layui-form-box>.layui-upload-drag {
                    box-shadow: inset 0px -4px 9px 0px rgba(82, 255, 255, 0.45);
                    border: 1px solid rgba(82, 255, 255, 0.45);
                }
    
                .layui-input-block>.layui-textarea {
                    width: 90%;
                }
            </style>
    	</head>
    	<link rel="stylesheet" href="http://192.168.31.113:8008/frame/assets/libs/ajax/libs/layui2/css/layui.css">
    	<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.js"></script>
    
    	<body>
    		<input type="hidden" id="ipuFile" name="file" value="">
    		<div class="layui-form-item layui-form-text layui-form-box ">
    			<label class="layui-form-label">内容 : </label>
    			<div class="layui-input-block">
    				<textarea placeholder="请输入内容" id="processContent" class="layui-textarea"></textarea>
    			</div>
    		</div>
    		<div class="layui-form-item layui-form-text layui-form-box ">
    			<label class="layui-form-label">文件上传 : </label>
    			<div class="layui-upload-drag" id="uploadFile">
    				<div>
    					<i class="layui-icon">&#xe67c;</i>
    					<p>点击上传,或将文件拖拽到此处</p>
    				</div>
    
    				<div class="layui-hide" id="uploadDemoView">
    					<hr>
    					<img src="/frame/assets/img/fileIcon.png" alt="上传成功后渲染" style="max-width: 196px">
    				</div>
    			</div>
    		</div>
    		<div class="layui-form-item layui-form-text layui-form-box ">
    			<button type="button" style=" margin-left: 110px; display: none;" id="anewBtn" onclick="deleteUpload()" class="layui-btn">删除</button>
    		</div>
    
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    		<script src="http://192.168.31.113:8008/frame/assets/js/api.js"></script>
    	</body>
    	<script>
    		// 上传
    		layui.use('upload', function() {
    			var upload = layui.upload;
    			upload.render({
    				elem: '#uploadFile',
    				url: HTTP_ROOT_PATH + '/system/workerorder/uploadfile2' //改成您自己的上传接口
    					,
    				before: function(obj) { //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
    					layer.load(); //上传loading
    				},
    				done: function(res, index, upload) { //上传后的回调
    					layer.closeAll('loading'); //关闭loading
    					console.log(res, '服务器返回的数据res');
    					if (res.code == 0) {
    						console.log(res, 72);
    						$('#anewBtn').css('display', 'block');
    						//do something (比如将res返回的图片链接保存到表单的隐藏域)
    
    						// 显示成功状态
    						layer.msg('上传成功', {
    							time: 500
    						});
    
    						// 上传图片成功时,让img回显图片
    						layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
    					} else {
    						layer.msg('上传失败!', {
    							time: 500
    						});
    					}
    				},
    				accept: 'file' //允许上传的文件类型
    					,
    				choose: function(obj) {
    					//将每次选择的文件追加到文件队列
    					var files = obj.pushFile();
    					//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
    					obj.preview(function(index, file, result) {
    						console.log(index, '得到文件索引'); //得到文件索引
    						console.log(file, '得到文件对象'); //得到文件对象
    						console.log(result, '得到文件base64编码'); //得到文件base64编码,比如图片
    						//obj.resetFile(index, file, '123.jpg'); //重命名文件名,layui 2.3.0 开始新增
    						//这里还可以做一些 append 文件列表 DOM 的操作
    						//obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
    					});
    				},
    				multiple: false // 多文件上传
    					,
    				error: function(index, upload) {
    					layer.msg('服务器上传失败!');
    					//当上传失败时,你可以生成一个“重新上传”的按钮,点击该按钮时,执行  upload()  方法即可实现重新上传
    					layer.closeAll('loading'); //关闭loading
    				}
    			});
    		});
    
    		// 删除
    		function deleteUpload() {
    			layer.msg('确认要删除当前文件吗?', {
    				btn: ['确认', '取消'],
    				time: 20000, //2秒关闭(如果不配置,默认是3秒)
    				yes: function() {
    					$('#ipuFile').val('');
    					$('#uploadDemoView').addClass('layui-hide');
    					$('#anewBtn').css('display', 'none');
    					layer.msg('删除成功', {
    						time: 500
    					});
    				},
    			})
    		}
    	</script>
    
    </html>
    
    
    展开全文
  • 1.本次上传文件Excle批量导入文件。 上传页面layui写法,弹框页面如图。 <li class="layui-timeline-item">...i class="layui-icon layui-timeline-axis">...div class="layui-timeline-content layui-tex...

    1.本次上传文件Excel批量导入文件。

    上传页面layui写法,弹框页面如图。

    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">3、选择并上传</h3>
            <p>根据下载/导出的模板,编辑人员信息</p><br/>
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="test10">选择人员</button>
                <button type="button"  class="layui-btn layui-btn-sm" id="test100">开始上传</button>
            </div>
        </div>
    </li>

    2.接下来完成js方法。

    top.$("#addAndEdit_class #exp_people_btn").off("click");
    top.$("#addAndEdit_class #exp_people_btn").on("click", function () {		
        var expUserWindow = top.layer.open({
            type: 1,
            title: '导入人员',
            maxmin: true,
            area: ['750px', '400px'],
            content: $("#addAll2").html(),
            btn: ['确定', '取消'],
            yes: function () { // 确定按钮点击事件
                top.layer.close(expUserWindow);
                $("#addAll2").hide();							
                return false;
            },
            cancel: function () { // 右上角关闭回调
                top.layer.close(expUserWindow);
                $("#addAll2").hide();
            },
            btn2: function () {
                top.layer.close(expUserWindow);
                $("#addAll2").hide();
            },
            success: function (layero, index) { // 弹框弹出成功后的回调
                window.parent.reRenderForm();
                top.layui.use('upload', function(){
                var $ = top.layui.jquery,upload = top.layui.upload;  
    
                    //选完文件后不自动上传 
                            upload.render({
                            elem: '#test10'
                            ,url: "${pageContext.request.contextPath}/customer/importCustomers"
                            ,accept: 'file' //普通文件
                            ,auto: false
                            ,field:'filess'
                            ,exts: 'xls' 
                            ,bindAction: '#test100' 
                            ,done: function(res){
                                console.log(res)
                                openPopup(res);
                            }
                            ,before: function(){
                                var index = top.layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
                                //loading层
                                index = top.layer.load(1, {
                                    shade: [0.5,'#ccc'],//0.1透明度的白色背景
                                });
                                setTimeout(function () {
                                    top.layer.close(index)
                                }, 2000)
                            }
                        });
                    
                    });					
                }
        });
    })

    3.完成java后台请求接口。
    注意因为upload控件返回必须是json数据所以要加上    @ResponseBody  注解

    /**
    * Customers Excle 批量导入
    * @param file
    * @return
    * @throws Exception
    */
    @RequestMapping(value="/importCustomers",method = {RequestMethod.POST})
    @ResponseBody
    public Map<String,Object> importEmpls(@RequestParam(value = "filess", required = true) MultipartFile[] file) throws Exception{
        PageData pageData = getPageData();
        pageData.put("filess",file);
        pageData.put("createId", getCreateID());
        pageData.put("createTime", getCreateTime());
        Map<String,Object> map= kpxCustomerService.importCustomers(pageData);
        logger.debug(map.toString());
        return map;
    }

    4.如果不加上注解,实际上后台已经接受到请求,而浏览器则是报错404找不到。

    5.加上注解之后则是正常的,点击上传显示正在上传,到最后的完成上传。

    展开全文
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...

    html select 下拉框显示

    <div class="layui-input-inline" >
    <select name="categoryId" id="categoryId" style="height:38px;">
           <option selected="selected" ></option>
            <option value="1">222</option>
            <option value="2">444</option>
            <option value="3">555</option>
            <option value="4">666</option>
    </select>
     </div>
    

    layui 多文件上传并携带动态select选中参数值

    layui.use('upload', function(){
        	  var $=layui.jquery
        	  ,upload = layui.upload;
        	  //多文件列表示例
        	  var demoListView=$('#demoList')
        	  ,uploadListIns=upload.render({
        	    elem: '#testList'
        	    ,url: ''
        	    ,before: function(obj){
                    this.data={"categoryId":$("#categoryId").val()};
                }
        	    ,accept: 'file'
        	    ,multiple: true
        	    ,auto: false
        	    ,bindAction: '#testListAction'
        	    ,choose: function(obj){   
        	      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        	      //读取本地文件
        	      obj.preview(function(index, file, result){
        	        var tr = $(['<tr id="upload-'+ index +'">'
        	          ,'<td>'+ file.name +'</td>'
        	          ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
        	          ,'<td>等待上传</td>'
        	          ,'<td>'
        	            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
        	            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
        	          ,'</td>'
        	        ,'</tr>'].join(''));
        	        
        	        //单个重传
        	        tr.find('.demo-reload').on('click', function(){
        	          obj.upload(index, file);
        	        });
        	        
        	        //删除
        	        tr.find('.demo-delete').on('click', function(){
        	          delete files[index]; //删除对应的文件
        	          tr.remove();
        	          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
        	        });
        	        
        	        demoListView.append(tr);
        	      });
        	    }
        	    ,done:function(res,index, upload){
        	    	 console.log(res);//服务器响应信息
        	         console.log(index);//当前文件的索引
        	         console.log(upload);//重新上传的方法    	        
        	      if(res.code==200){ //上传成功
        	        var tr = demoListView.find('tr#upload-'+ index)
        	        ,tds = tr.children();
        	        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        	        tds.eq(3).html(''); //清空操作
        	        return delete this.files[index]; //删除文件队列已经上传成功的文件
        	      }
        	      this.error(index, upload);
        	    }
        	    ,error:function(index,upload){
        	    	console.log(index);//当前文件的索引
        	        console.log(upload);//重新上传的方法
        	      var tr = demoListView.find('tr#upload-'+ index)
        	      ,tds = tr.children();
        	      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
        	      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        	    }
        	  });
        	});
    

    获取select选中的值关键代码

    ,before: function(obj){
                  this.data={"categoryId":$("#categoryId").val()};
      }
    
    展开全文
  • layuiupload插件使用方法 实现内容:点击添加广告能够动态在后面添加一行,例如图1所示,并且还能够动态删除选定行 图1 下面我们来具体讲下是如何实现该功能的 先贴上代码,layui的css与jq引用就不贴了,...

    layui 中upload插件使用方法

    实现内容:点击添加广告能够动态在后面添加一行,例如图1所示,并且还能够动态删除选定行

    在这里插入图片描述

    图1

    下面我们来具体讲下是如何实现该功能的

    先贴上代码,layui的css与jq引用就不贴了,hahahahaha…

    html代码片段:

    <fieldset class="layui-elem-field">
            <label class="layui-form-label" style="font-size: 18px">广告设置</label>
            <div class="layui-field-box">
              <div class="advert_set">
                <volist name="list[advert_set]" id="v1">
                  <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">广告{$key}图片</label>
                        <div class="layui-input-inline">
                          <input type="file" name="advert_img" class="layui-upload-file">
                          <input type="hidden" name="advert_set[{$key}][advert_img]" class="advert_img" lay-verify="required" value="{$v1['advert_img']}">
                          <div class="img_box">
                            <if condition="$v1['advert_img']">
                              <img class="show_qrcode" src="{$v1['advert_img']}" alt="">
                            </if>
                          </div>
                        </div>
                      <label class="layui-form-label">广告{$key}跳转地址</label>
                      <div class="layui-input-inline">
                        <input name="advert_set[{$key}][jump_addr]" class="layui-input level_item" type="text" placeholder="请输入广告跳转地址" autocomplete="off" lay-verify="required" value="{$v1['jump_addr']}">
                      </div>
                      <button type="button" class="layui-btn layui-btn-primary layui-btn del_advert"><i class="layui-icon"></i></button>
                      </div>
                    </div>
    
                </volist>
              </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">&nbsp;</label>
                <div class="layui-input-inline">
                  <button type="button" class="layui-btn layui-btn-sm layui-btn-normal add_advert" data-param="">添加广告</button>
                </div>
              </div>
            </div>
          </fieldset>
    

    jQuery代码片段:

    //删除广告
      $('.del_advert').click(function () {
        $(this).parents('.layui-form-item').remove();
      });
      //添加广告
      $('.add_advert').click(function () {
        // var key = $('.advert_set').find('.layui-form-item').length + 1;
        $('.advert_set').append(
          '<div class="layui-form-item">'+
                '<div class="layui-inline">'+
                '<label class="layui-form-label">广告图片</label>'+
                '<div class="layui-input-inline">'+
                '<input type="file" name="advert_img" class="layui-upload-file">'+
                '<input type="hidden" name="" class="advert_img" lay-verify="required">'+
                '<div class="img_box">'+
                '<img class="show_qrcode" src="" alt="">'+
                '</div>'+
                '</div>'+
                '<label class="layui-form-label">跳转地址</label>'+
                '<div class="layui-input-inline">'+
                '<input name="" class="layui-input jump_addr" type="text" placeholder="请输入广告跳转地址" autocomplete="off" lay-verify="required" value="">'+
                '</div>'+
                '<button type="button" class="layui-btn layui-btn-primary layui-btn del_advert"><i class="layui-icon"></i></button>'+
           '</div>'
        );
        $.each($('.advert_img'),function(i){    //广告图片name
          i += 1;
          $(this).attr('name','advert_set['+i+'][advert_img]');
        });
        $.each($('.jump_addr'),function(i){    //广告跳转地址name
          i += 1;
          $(this).attr('name','advert_set['+i+'][jump_addr]');
        });
    
        layui.upload({
          url: "{:U('up_advert_img')}"
          ,success: function(res,input){
            console.log(res); //上传成功返回值,必须为json格式
            $(input).parent().parent().parent().children('input:hidden').val(res.data['path']);
            $(input).parent().parent().parent().children('.img_box').empty().append(
                    '<img class="show_qrcode" src="'+res.data['path']+'" alt="">'
            );
            //错误提示
            if(res.code == 0){
              layer.msg(res.msg,{time:2800,icon: 5});
            }
          }
        });
    
        $('.del_advert').click(function () {
          return false;
          $(this).parents('.layui-form-item').remove();
        });
    
      });
    
    

    php控制器代码片段:

    //获取广告设置内容
     $advert_set =  I('post.advert_set');
                $advert_set =   json_encode($advert_set,true);
                if(isset($advert_set['advert_img']))unset($advert_set['advert_img']);
                if(isset($advert_set['jump_addr']))unset($advert_set['jump_addr']);
    
     //理财广告设置
                $configModel->where(['config_sign'=>'advert_set'])->save(['config_value'=>$advert_set]);
              
    //理财广告设置处理
                $advert = $list['advert_set'];
                $list['advert_set'] = json_decode($advert,true);
    
    /*
         理财广告图上传
     */
    
        public function up_advert_img(){
            $keys = array_keys($_FILES);
            $file_name = $keys[0];
    
            $upload = new \Think\Upload();// 实例化上传类
            $upload->maxSize = 3145728;// 设置附件上传大小
            $upload->savePath = '/qrcode/'; // 设置附件上传(子)目录
            $upload->saveName = 'time';
            $upload->autoSub = false;
            $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
            $info = $upload->upload();
            if(!$info) {
                // 上传错误提示错误信息
    //            dump($upload->getError());exit;
                $this->ajaxOutput($upload->getError(),0);
            }else{
                // 上传成功
                $path = '/Uploads'.$info[$file_name]['savepath'].$info[$file_name]['savename'];
                $this->ajaxOutput('上传成功', 1, '', [
                    'path'  =>  $path
                ]);
            }
        }
    

    该功能的具体实现原理是:

    首先不看html代码里面的,当点击添加广告按钮时,通过append函数,在后面添加一行item,并且用i来标记改变input框内name的值,再点击上传图片按钮(这个按钮是layui.upload自动渲染的),添加完图片后,保存在upload里,并显示在图片框内,获取地址点击保存所有按钮时,在控制器中将广告设置以json格式保存入数据库,键名相当于识别标识符,用来判别相对的广告,再将广告设置的值json_decode改成数组,遍历到显示页面中。

    遇到的难点

    1、显示不出上传图片的layui渲染
    解决:把layui.upload方法写入到添加广告的方法中
    在这里插入图片描述
    2、

    展开全文
  • 今天上传图片报错了,使用的layuiupload控件,报错信息:请求上传接口出现异常,如图:经查,是由于修改某些cookie信息造成的,出现这个情况其实就是返回的json数据格式不正确另外,我修正了json格式后,发现还是...
  • div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1" width...
  • layui.upload总结

    2020-07-03 14:18:48
    1.layui任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的DIV等等,而不再是一个单调的file文件域。 (1)引入layuiupload模块。 elem:用户点击弹出选择文件上传的区域。 bindAction:用户点击触发上传...
  • layui实现upload上传带进度条

    千次阅读 2019-10-18 15:30:48
    接触了一段时间的 layui 之后,了解了进度条 progress 模块和上传 upload 模块之后就想着能不能结合这两者整一个带进度条的上传功能。 一、修改layui包下的upload.js模块 使用 layui 的模块化加载(layui.js),需...
  • layui 多张图片上传且默认显示 <!-- HTML结构 --> <!-- 多张图片的HTML结构 --> <div class="layui-form-item"> <label class="layui-form-label"><span class="x-red">*</...
  • Layui实现图片上传和显示功能前言一、Layui表格的图片显示2.在对应的html页面里自定义头像的类型二、Layui图片上传1.html中添加图片上传按钮2.对应的js中添加图片上传总结 前言 编译工具:IDEA 提示:以下是本篇...
  • <div class="col-md-6 column"> <div class="form-group"> <label for="bt-financeIdentityCardBack">身份证反面:<...button type="button" class="layui-btn " id="bt-finance
  • 加入添加图片的按钮以及显示图片的按钮 form部分 <div class="layui-form-item layui-form-text"> <label class="layui-form-label">缩略图</label> <di...
  • 官网操作文档:https://www.layui.com/doc/modules/upload.html ssm使用layui拖拽上传参考:https://www.cnblogs.com/yysbolg/p/9117101.html 因为这篇文章实际操作时遇到一些问题,经修改调试,所以写这篇文章,仅...
  • <div class="layui-upload-drag" id="test10" onclick="getToken()" style='margin-left: 25%;margin-top:20px'> <i class="layui-icon">&...
  • layui多张图片上传最多9张(新增和修改时的显示问题)   html: &lt;div class="layui-upload"&gt; &lt;button v-show="imgList.length&lt;9 || imgList.length == ...
  • 众所周知,CS 程序之所以干不过BS程序最大的原因就是不能或者很难实现一个文本编辑并且前台显示,当然可以通过第三方插件实现,这样就会有... 前端:LayUI 框架 插件:thymeleaf 前端 <!DOCTYPE html> <...
  • https://www.layui.com/demo/upload.html 这个是官网,那里有示例以及代码 比如其中一个 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
  • layui上传图片回显

    2020-12-28 15:44:12
    图片上传成功后,在下方显示上传的图片内容 html代码 <button type="button" class="layui-btn" id="test1"> <i class="layui-icon">&#xe67c;</i>上传图片 </button> <input ...
  • tp5使用layui异步上传图片

    千次阅读 2019-01-07 14:19:33
    上传文件任何地方都要用到,这篇文章介绍使用layui异步上传图片。 1.视图代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8&...
  • layui之 实现图片放大

    2020-12-21 16:25:47
    <div class="layui-form-item"> <label class="layui-form-label">反馈图片</label> <...js中 实现遍历显示图片 数据库中 img_url 值为 ["/app/promotion/public/app.png","/
  • layui 列表图片点击放大显示

    千次阅读 2019-11-04 13:58:26
    暂无图片 {{# } else { }} <div> <a lay-event="lookImg"><img width='40' title="点击放大" style="cursor: pointer;" height='40' higth id="myImg" src="{{ d.goodPic}}"/></a> {{# } }} $(document...
  • 使用layui.upload上传文件与使用layer.open方式上传文件。上传文件的方式有很多种,这里简单介绍以下两种方式。 第一种:layui.upload上传文件 layui.use(['layer','upload'], function () { var upload = layui....
  • 话不多说,如标题 直接上代码 ... <div class="layui-form-item"> <label class="layui-form-label" style="width: 150px">冒泡推送首页大海报:<...div class="layui-upload"> ...
  • button type="button" class="layui-btn" id="upload">上传图片</button> <img class="layui-upload-img" id="demo1"> <p id="demoText" ></p> 引入js 在js中引入la...
  • layui+springboot+thymeleaf上传图片接口并显示图片 前端页面 前端使用的是开源框架layuilayui提供了一个上传文件的组件,使用方式如下: html javascript <script> layui.use('upload',function...
  • 给页面中相应的标签三次使用upload.render(),因为上传前上传后页面显示的内容不一样,上传前显示的是官方网站给出的点击上传图片,或将图片拖拽到此处,上传后显示的是自己从本地上传的图片,所以结合了Vue的v-if,v...
  • Not allowed to load local resource: file:///E:/MyIDeaJDSHPT/xlzx/src/main/resources/static/images/2020-04-24/adb8c0c3-cb4c-4303-8bf8-008328b6ef2b.png 路径中多了一个file,我定义的本地路径没有file....
  • Layui上传图片

    2020-10-07 20:04:17
    1、 最近学会了使用layui插件上传图片,这是比较简单得图片上传方式。只要你会引进layui的插件,相信大部分都会使用。首先我们先得引进layui的CSS样式。 还有就是JS插件。记得放后面。 每个人的layui放的地方不一样...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,062
精华内容 424
关键字:

layuiupload显示图片