精华内容
下载资源
问答
  • 使用layui 上传图片 不自动上传
    千次阅读
    2018-08-07 16:39:13

     <div class="layui-form-item">
                        <label class="layui-form-label">图片水印:</label>                 
                        <div class="layui-upload">                     
                          <div class="layui-upload-list">
                            <img class="layui-upload-img" id="upimg">
                          </div>
                           <button type="button" class="layui-btn" id="upbtn" >更新上传</button>    
                           <button type="button" class="layui-btn" id="upbtn1" style="display: none;">上传</button>                   
                           <input type="hidden" value="" name="watermark"/>
                        </div>                     
                    </div>

    var uploadInst = upload.render({                   
                        elem: '#upbtn'
                        ,url: '<?php echo Url::to(['upload/img']);?>&plate=site&fname=sites&field=watermark&type=1&sid='+_rows.id
                        ,data: {
                          filename: function(){
                            return $('input[name="url"]').val()+'_watermark';
                          }
                        }
                        ,auto: false
                        ,bindAction: '#upbtn1'
                        ,field:'UploadForm[file]' 
                        ,acceptMime: 'image/png'                   
                        ,exts:'png'
                        ,choose: function(obj){                                           
                                 layer.load(1, {
                                     shade: [0.5,'#000']
                                 });                               
                                 obj.preview(function(index, file, result){                                                                                               
                                    $('#upimg').attr('src', result); //图片链接                               
                                  });                        
                                $("#upbtn1").click();                            
                       }                                    
                        ,done: function(res){                        
                          //如果上传失败                      
                          if(res.code > 0){
                              layer.closeAll();
                              $(".layui-upload-file").val("");                          
                            return layer.msg(res.msg);
                          }else{       //上传成功    
                              layer.closeAll();                              
                              $("input[name='watermark']").val(res.msg);                          
                              layer.msg("上传成功");                           
                          }
                          
                        }
                        ,error: function(){
                          //演示失败状态,并实现重传    
                          layer.closeAll();              
                          layer.msg("上传失败");
                          $(".layui-upload-file").val("");
                        }
                      });

    更多相关内容
  • 今天小编就为大家分享一篇layui 上传图片 返回图片地址的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一个简单的没有技术含量的方法
  • 废话多说了,直接上代码吧! //给图片添加删除 function mouseChange() { $[removed]("mouseenter mouseleave", ".file-iteme", function (event) { if (event.type === "mouseenter") { //鼠标悬浮 $(this...
  • layui文件上传.rar

    2021-06-19 16:45:11
    基于layui文件上传,显示上传进度和文件相关信息
  • 今天小编就为大家分享一篇layui 上传插件 带预览 非自动上传功能的实例(非常实用),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 上传附件,将选择与上传分开,图片则显示缩略图。表单验证通过后才上传。 1、选择按钮使用input标签,解决点击后验证表单问题。 2、增加隐藏按钮与upload.render绑定。在表单验证通过后,使用模拟点击上传$('')....

    上传附件,将选择与上传分开,图片则显示缩略图。表单验证通过后才上传。

    1、选择按钮使用input标签,解决点击后验证表单问题。

    2、增加隐藏按钮与upload.render绑定。在表单验证通过后,使用模拟点击上传$('').trigger('click');

    3、修改时,如果只修改了表单内容,则附件不重复上传,如果修改了附件则上传。监听选择文件的回调函数。

    Html代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../../../../../css/validform/style.css" media="all" />
    		<link rel="stylesheet" type="text/css" href="../../../../../layui/css/layui.css" media="all" />
    		<link rel="stylesheet" type="text/css" href="../../../../../css/modules/comm.css" media="all">
    		<style type="text/css">
    			html,body{
    				height: auto;
    			}
    			.layui-input-block {
    				margin-right: 20px;
    			}
    
    			.layui-input,
    			.layui-select,
    			.layui-textarea {
    				height: 38px;
    			}
    
    			.layui-form-pane .layui-input-block,
    			.layui-form-pane .layui-input-inline,
    			layui-form-pane .layui-form-label {
    				margin-bottom: 12px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<form class="layui-form layui-container layui-form-pane" id="datumForm">
    			<fieldset class="layui-elem-field layui-field-title">
    				<legend>资料信息</legend>
    			</fieldset>
    			<div class="layui-form-item">
    				<input name="id" type="hidden" v-model="id">
    				<input name="pic_id" type="hidden" v-model="pic_id">
    				<input name="org_id" type="hidden" v-model="org_id">
    				<input name="sub_cid" type="hidden" v-model="sub_cid">
    				<input name="device_id" type="hidden" v-model="device_id">
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">资料类型:</label>
    					<div class="layui-input-inline layui-form" lay-filter="datumFilter">
    						<select name="type" datatype="*" id="datum_type" lay-filter="datumTypeFilter" lay-search></select>
    					</div>
    				</div>
    				<div class="layui-inline">
    					<label class="layui-form-label">资料名称:</label>
    					<div class="layui-input-inline">
    						<input id="datumName" type="text" name="name" datatype="*" class="layui-input" v-model="name">
    					</div>
    				</div>
    				<div class="layui-inline">
    					<div class="layui-input-inline">
    						<input type="button" class="layui-btn layui-btn-normal layui-btn-radius" value="选择" id="selectDatum"/>
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item layui-form-text" style="height: 100%; padding: 10px 0;">
    				<label class="layui-form-label ">资料描述</label>
    				<div class="layui-input-block" style="height: calc(100% - 38px - 20px - 5px);">
    					<textarea class="layui-textarea" style="height:100%;" name="remark" v-model="remark"></textarea>
    				</div>
    			</div>
    			<div class="layui-form-item" v-show="picIsShow">
    				 <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    				    预览图:
    				    <div class="layui-upload-list" id="datumPic"></div>
    				 </blockquote>
    				
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-col-md4 layui-col-md-offset4">
    					<div class="layui-input-block button-item">
    						<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
    						<button class="layui-btn" id="uploadDatum" style="display: none;">上传</button>
    						<button id="cancel" class="layui-btn layui-btn-primary">取消</button>
    					</div>
    				</div>
    			</div>
    		</form>
    		<script src="../../../../../js/lib/jquery/jquery.min.js"></script>
    		<script src="../../../../../layui/layui.js"></script>
    		<script src="../../../../../js/lib/vue/vue.min.js"></script>
    		<script src="../../../../../js/common/common.js"></script>
    		<script src="../../../../../js/lib/Validform_v5.3.2_min.js"></script>
    		<script src="../../../../../js/app/base/device/datum/editDeviceDatum.js"></script>
    	</body>
    </html>
    

    js代码

    /**
     * 资料上传
     * @author chenbin
     * @date 2019.08.21
     * 
     */
    
    var record = parent.datum.record;
    var datum_upload_url = parent.datum_upload_url;
    
    //是否显示缩略图
    record.picIsShow = false;
    
    if(record.type == 1){
    	record.picIsShow = true;
    }
    //只修改信息未上传附件
    var updataInfo = true;
    
    //vue初始化
    var vm = new Vue({
    	el: "#datumForm",
    	data: record
    })
    
    layui.use(['form', 'laydate', 'layer', 'upload'], function() {
    	var form = layui.form,
    		layer = layui.layer,
    		laydate = layui.laydate,
    		$ = layui.$,
    		upload = layui.upload;
    
    	var uploadParam = {};
    
    	var isSubmit = true;
    	var valid = $("#datumForm").Validform({
    		tiptype: 3,
    		callback: function(data) {
    			var p = Form.getFormJson(data);
    			if (isSubmit) {
    				update(p);
    			}
    			return false;
    		}
    	});
    
    	//类型下拉框
    	select.setSelectData("datum_type", "datumFilter", select.formatEnumDataByKey("datum_type"), form, false, function() {
    		if (record.type != null) {
    			$("#datum_type").val(record.type);
    		}
    		
    		$('.layui-form-select dl dd.layui-this').trigger('click');
    	});
    
    	//监听选中事件
    	form.on('select(datumTypeFilter)', function(data) {
    		if (data.value == 1) {
    			vm.picIsShow = true;
    		} else {
    			vm.picIsShow = false;
    		}
    	});
    
    	function update(obj) {
    		uploadParam = obj;
    		if(!updataInfo){
    			$("#uploadDatum").trigger('click');
    		}else{
    			updateInfo();
    		}
    		
    	}
    
    	$("#cancel").click(function() {
    		isSubmit = false;
    		var index = parent.layer.getFrameIndex(window.name);
    		parent.layer.close(index);
    	});
    
    	//文件上传
    	upload.render({
    		elem: '#selectDatum',
    		url: Ajax.formatUrl(datum_upload_url),
    		size: 1024 * 20,
    		accept: "file",
    		acceptMime: 'file',
    		auto: false,
    		bindAction: '#uploadDatum',
    		headers: {
    			'Authorization': LocalData.getToken()
    		},
    		choose: function(obj) {
    			updataInfo = false;
    			var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
    			//预读本地文件示例,不支持ie8
    			obj.preview(function(index, file, result) {
    				if (vm.picIsShow) {
    					$('#datumPic').empty();
    					var str = '<img src="' + result + '" style="height:80px;" class="layui-upload-img"/>';
    					$('#datumPic').append(str);
    				}
    				var name = $("#datumName").val();
    				if (comm.isEmpty(name)) {
    					$("#datumName").val(file.name);
    					$("#datumName").focus();
    					$("#datumName").blur();
    				}
    			});
    
    		},
    		before: function(obj) { //obj参数包含的信息
    			this.data = uploadParam;
    		},
    		done: function(res) {
    			console.log(res);
    			var index = parent.layer.getFrameIndex(window.name);
    			parent.layer.close(index);
    			// parent.layer.msg(data.msg);
    		}
    	});
    
    	//只修改信息未修改附件
    	function updateInfo(){
    		Ajax.Post(parent.edit_info_url, uploadParam, function(data) {
    			var index = parent.layer.getFrameIndex(window.name);
    			parent.layer.close(index);
    			parent.layer.msg(data.msg);
    		});
    	}
    
    	if(!comm.isEmpty(vm.url)){
    		if (vm.picIsShow) {
    			var url = datum.formatUrl(vm.url);
    			$('#datumPic').empty();
    			var str = '<img src="' + url + '" style="height:80px;" class="layui-upload-img"/>';
    			$('#datumPic').append(str);
    		}
    	}
    
    })
    

    效果

    展开全文
  • Layui实现文件上传的各种方式,拖拽,直接上传,格式限制上传Layui的官方文档中都有详细的说明以及实例,困扰我的就是如何让选择文件没上传之前将文件名显示在文本框内。 如图: <input type="text" ...

    Layui实现文件上传的各种方式,拖拽,直接上传,格式限制上传等等在Layui的官方文档中都有详细的说明以及实例,困扰我的是如何在选择文件没上传之前将文件名显示在文本框内。

    如图:

    基本上就是设置一个输入框,然后增加一个placeholder属性,指引别人点击右侧浏览,然后把文本框禁止输入。 代码如下,我们给一个id="name"。

    <input type="text" readonly="readonly" name="title" required lay-verify="required"
                               placeholder="请点击右侧浏览"
                               autocomplete="off" class="layui-input" id="name">


    下面是js:

    , choose: function (obj) {
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            console.log(obj)
    
            //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                console.log(index); //得到文件索引
                console.log(file); //得到文件对象
                console.log(result); //得到文件base64编码,比如图片

    console.log()打印出拿到的file,我们打开浏览器的控制台可以看到file里面已经抓到了图片名name:

     

    那么我们在js文件里面加上

     document.getElementById('name').value = file.name
    
    //name 是input框的id
    //file.name 是刚刚拿到的数据

    放在下列位置

      //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                console.log(index); //得到文件索引
                console.log(file); //得到文件对象
                console.log(result); //得到文件base64编码,比如图片
                //获取文件名***************************
                document.getElementById('name').value = file.name

    下面是关于文件上传完整的的JS代码:

    upload.render({
        elem: '#test8'
        , url: 'https://httpbin.org/post' //改成您自己的上传接口
        , auto: false
        //,multiple: true
        , bindAction: '#test9'
        , choose: function (obj) {
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();
            console.log(obj)
    
            //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
                console.log(index); //得到文件索引
                console.log(file); //得到文件对象
                console.log(result); //得到文件base64编码,比如图片
                //获取文件名***************************
                document.getElementById('name').value = file.name
    
    
                //这里还可以做一些 append 文件列表 DOM 的操作
    
                //obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
                //delete files[index]; //删除列表中对应的文件,一般在某个事件中使用
            });
        }
    
        , done: function (res) {
            layer.msg('上传成功');
            console.log(res)
        }
    });

     

    即可实现选择文件后文件名自动载入文本框

    展开全文
  • 今天小编就为大家分享一篇关于layui表单中按钮自动提交的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • ; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> (); String basePath = request.getScheme() + "://" + request.getServerName() + ... %> 文件上传 选择文件 开始上传 预览图:
    <%@ page language="java" contentType="text/html; charset=utf-8"
             pageEncoding="utf-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                + path;
    %>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文件上传</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="<%=basePath %>/assets/layui/css/layui.css">
        <style type="text/css">
            .layui-upload-img {
                width: 92px;
                height: 92px;
                margin: 0 10px 10px 0;
            }
        </style>
    </head>
    <body>
    <div class="ok-body">
        <div class="layui-row layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
            <button type="button" class="layui-btn" id="test9">开始上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图:
                <div class="layui-upload-list" id="demo8"></div>
            </blockquote>
        </div>
    </div>
    <!--js逻辑-->
    <script src="<%=basePath %>/assets/js/jquery-1.8.3.min.js"></script>
    <script src="<%=basePath %>/assets/layui/layui.js"></script>
    <script>
        layui.use(['upload'], function () {
            var upload = layui.upload;
            var $ = layui.jquery,FILES;
            var uploadInst = upload.render({
                elem: '#test2'
                ,url: 'https://httpbin.org/post' //改成您自己的上传接口
                ,auto: false,multiple: true,bindAction: '#test3', field: 'fileUploads'
                ,choose: function(obj){ //预读本地文件示例,不支持ie8
                    FILES = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    obj.preview(function(index, file, result){
                        $('#demo2').append('<div class="imgDiv" id="div'+index+'"><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><a id="a' + index + '" class="layui-btn layui-btn-primary layui-btn-sm  layui-icon layui-icon-close" ></a></div>');
                        $('#a' + index).on('click', function () {
                            delete FILES[index];
                            $('#div' + index).remove();
                        });
                    });
                },done: function(res, index, upload){
                    delete FILES[index]; //删除队列
                    //后台返回信息,如存放地点、文件真实名称
                    var uploadHid = $('#uploadHid').val();
                    if(uploadHid != '') uploadHid += ';';
                    $('#uploadHid').val(uploadHid + res.backMessage);
                },allDone: function(obj){
                    //当文件全部被提交后,才触发
    
                }
            });
        });
    
    </script>
    </body>
    </html>

    展开全文
  • 今天运维项目,需要增加上传图片,碰到了两个坑,亲测有效。 首弹: 1.需要动态生成html,刚开始只是在 <script type="text/javascript"> layui.upload.render({ elem: '#xx', url: 'xxx', done: ...
  • layui压缩图片上传

    2022-03-16 21:52:57
    <script>... //上传图片 var index; $(".dade_img").click(function () { $("#file").click(); }) layui.use(['upload', 'element', 'layer'], function() { var $ = layui.jquery ...
  • layui图片上传

    千次阅读 2021-07-26 20:03:22
    Layui文件上传 layui官网:https://www.layui.com/ layui插件下载 官方文档(关于文件上传) 快速入门 前端 1、 index页面,引入css样式和js脚本 <!DOCTYPE html> <...index<
  • 在工作中使用到layui,发现其上传功能并不是很适用于自己的项目。故此,借用其上传功能,自己将...上传图片```tips:一定非要是input标签,无论是什么标签,layui upload是根据其 id 值进行操作的JS:```js//使用...
  • form class="layui-form layui-form-pane" action="" enctype="multipart/form-data" onsubmit="return false;"> <div class="layui-form-item"> <label class="layui-form-label">标题</label&...
  • 首先要会使用layui的写法,如图所示,提交之后有三个状态,一个上传中,一般文件大就会在这步显示,第三步就是报错,第二步是最主要的上传成功之后一系列的操作。在控制器中自己写方法把获取到的图片传到服务器,...
  • 3、点击“开始上传”按钮,显示在页面上,图片信息传到后台中,将图片进行保存; 4、还可以上传多个文件。 效果图上完了,就开始代码咯!   //layUI代码 &lt;div class="layui-upload"&...
  • layui判断图片尺寸并终止上传 //普通图片上传 var uploadInst = upload.... , auto: false // 要是用choose时必须设置不自动上传 , choose: function (obj) { //预读本地文件示例,支持ie8 obj.preview(func
  • 一、关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下:functionphotoCompress(file, w, objDiv) {var ready = newFileReader();/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,...
  • layui文件上传(头像上传)
  • [学习笔记]图片不自动上传并在表单提交时再上传,看代码。附上表单页面前台实现autocomplete="off" class="layui-input" disabled>autocomplete="off" class="layui-input">上传图片确定layui.use(['form', '...
  • LAYUI图片上传OSS

    2021-08-20 11:14:15
    LAYUI图片上传OSS 原文章参考:...
  • layui阻止上传并且能够延迟上传

    千次阅读 2022-03-22 13:00:59
    最近搞个判断是否阻止,网上搜了些,可以用,但是就能延迟上传了,研究了下代码,这样写就能先选中再上传了 打开upload搜索y = function () 之后注释原代码,加入 if ("choose" !== i && !l.auto || (l.choose &...
  • html: <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片(最多2张)</button> ...
  • layui 上传图片后刷新,如何解决 ![图片说明](https://img-ask.csdn.net/upload/202006/27/1593246060_722041.gif) 如上图所示,有没有解决办法? 尝试了很多办法 都不行》》
  • 前端的代码Layui官网上也有,大家可以参考一下(主要是后端比较难实现,话多说 小二上代码)
  • span class="layui-btn layui-btn-sm" addid="slide_add_动态标识>" selid="slide_sel_动态标识" id="slide_up_动态标识">上传</span> //重载上传 function up_add(idname){ var slideupadd = ...

空空如也

空空如也

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

layui上传图片不自动上传