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

功能需求：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();
			});
	           }
		 });
	    });	
        })

 

效果：