jquery多图上传相册

最新推荐文章于 2024-04-14 23:06:29 发布

lumengabc

最新推荐文章于 2024-04-14 23:06:29 发布

阅读量279

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/webnoties/article/details/95487862

版权

javascript 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

原文地址：http://www.huhu905.com/zhishi/zhizuo/uploadjs.html

jquery多图上传相册无刷新layerui多图上传js原生

调用方法：

var url             = "upload/index";//
layui_fileupload_lm_all("#img_thump_click", url, "#img_thump_html", "#img_thump_input");

	//文件上传 多文件多图 layui
	function layui_fileupload_lm_all(id, url, show_img_id, show_input_id)
	{
			var url 		= url;
			layui.use('upload', function(){
			  var upload 	= layui.upload;
			  //执行实例
			  var uploadInst = upload.render({
				elem: id //绑定元素
				,url: url //上传接口				
				,multiple: true//多图上传开启
				,number:10//多图数目限制
				,accept:'file'
				,done: function(data, index, upload){
					  //上传完毕回调
					  if(!data || data.success !=1)
					  {
						alert('上传失败');
						return;
					  }
						var data = data.data;
						var filename_thumb_thumb_url 	= (data.filename_small_url);
						var filename_thumb_url 	= (data.filename_thumb_url);
						var filename_url 		= (data.filename_url);
						var img_path 			= (data.filename_thumb);
						console.log(data);

						var index_ary	= index.split('-');
						var order_by	= parseInt(index_ary[1])+1;

						var img_html = 
						"<a onClick=\"layui_img_show('"+filename_thumb_url+"')\" target='_blank' class='btn'><img style='width:80px;height:80px;' src='"+filename_thumb_thumb_url+"'></a><span class='btn-warning delete_upload_img' input_id='"+show_input_id+"' img_path='"+img_path+"' style='margin-right:10px;'>删除</span><br><input type='text' name='imglists[][img_path]' value='"+img_path+"'><br><input type='text' name='imglists[][order_by]' value='"+order_by+"'>";
						if(!filename_thumb_thumb_url)
						{
							img_html = "<a href='"+filename_url+"' target='_blank' class='btn'>查看</a>";
							img_path = (data.filename_path);
						}
						$(show_img_id).append(img_html);
						var show_input_id_val 	= $(show_input_id).val();		
						if(show_input_id_val)
						{
							show_input_id_val = show_input_id_val+","+img_path;//用逗号拼接上传的图片路径
						}else{
							show_input_id_val = img_path;
						}
						console.log(show_input_id_val);
						$(show_input_id).val(show_input_id_val);		
				}
				,error: function(){
				  //请求异常回调
				  alert('上传失败');
				}
			  });//
		});//lay
	}

虎虎网转载请注明出处