欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

tp5框架下实现在弹窗内实现文件上传功能

程序员文章站 2022-05-01 21:24:10
...

功能需求:TP5框架,layui前端框架,在弹窗中实现文件上传的功能

部分html代码

<form class="layui-form" style="padding:15px;">
    <div class="layui-form-item">
        <label class="layui-form-label">icon图标</label>
        <div class="layui-input-inline">
  	    <div class="layui-upload-list" style="display:inline-block;">
		<img class="layui-upload-img" id="iconimg" style="width:35px;height:35px;">
	        <p id="iconimgReload"></p>
	    </div>
	    <div class="layui-upload" style="display:inline-block;">
		<button type="button" class="layui-btn" id="iconimgbtn">上传图片</button>	
	    </div>
  	</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">icon名称</label>
	<div class="layui-input-inline">
	    <input type="text" name="iconimgname" value="" id="iconimgname" class="layui-input">
	</div>
    </div> 
</form>

 

js代码:

  // btn添加栏目单击事件
        $(".btn-addnav").on('click',function(){
	    $.get("http://"+_host +"/admin/admin/getAddNav",function(res){
	    // 弹窗
		 layer.tab({
                        area: ['600px', '500px'],
		        tab: [{
			    title: '常规', 
			    content: res
			}]
		});
		form.render();
		//普通图片上传
	        var uploadInst = upload.render({
		    elem: '#iconimgbtn'
		    ,url: "http://"+_host +"/admin/admin/getfile" //改成您自己的上传接口
		    ,accept: 'file' //普通文件
		    ,choose: function(obj){
		        //预读本地文件示例,不支持ie8
		        obj.preview(function(index, file, result){
			    $('#iconimg').attr('src', result); //图片链接(base64)
		        });
					    }
		    ,done: function(res){
		        //如果上传失败
		        if(res.error > 0){
			    return layer.msg('上传失败');
		        }
			else{
			    $("#iconimgname").val(res.filename);
		        }
		    }
		    ,error: function(index,upload){
			//演示失败状态,并实现重传
			var demoText = $('#iconimgReload');
		        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		        demoText.find('.demo-reload').on('click', function(){
		            uploadInst.upload();
			});
	           }
		 });
	    });	
        })

 

效果:

tp5框架下实现在弹窗内实现文件上传功能