layui文件/图片上传(单文件/图)

一吻轻安

已于 2022-09-08 16:38:54 修改

阅读量1.1k

点赞数

分类专栏：前端涂鸦文章标签： layui javascript 前端

于 2022-09-08 16:36:28 首次发布

本文链接：https://blog.csdn.net/oybn5201314/article/details/126767061

版权

前端涂鸦专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直奔主题
1.Html代码如下:

<div class="layui-form-item">
	  		<label class="layui-form-label">上传图片</label>
	  		<div class="layui-input-block">
	  		  <input name="pic" class="layui-input" type="text" readonly style="width: 360px; float: left;" />
	  		  <button type="button" class="layui-btn" id="upload" style="margin-left:10px;">选择图片</button>
	  		</div>
	  </div>

2.JS代码如下:

layui.use('upload', function(){
			var upload = layui.upload;
			//执行上传
			var uploadInst = upload.render({
					elem: '#upload' //绑定元素
					,url: '/web/ajax.php' //上传接口
					,data: {gongneng:"upload"}
					,method: 'POST'
					,accept: 'file'  //上传类型 mages（图片）、file（所有文件）、video（视频）、audio（音频）
					,size: 5000
					,before: function(obj){
							layer.load();
					}
					,done: function(res){//上传完毕回调
							layer.closeAll('loading');
							$("input[name=pic]").val(res.filename);
					}
					,error: function(){//请求异常回调
							layer.closeAll('loading');
							layer.msg('网络异常，请稍后重试！');
					}
			});
		});