基于WebUploader多图片上传，上传回显，编辑加载，图片删除，位置切换以及基于PhotoSwipe框架的图片预览功能

最近开发的项目使用到WebUploader作为图片上传组件，封装了图片上传的所有基本操作，且使用PhotoSwipe实现图片预览功能。

1.准备工作

下载项目Github地址：https://github.com/tysxquan/suploader
使用demo目录下的文件只是演示，请使用dist目录下的文件

2.选择实例

• 单图片上传
  

//单上传图片
	var $oneImage = $('#oneImage').supload({
		server: '/uploadFilePath',
		pick: {
			label: "像素不限<br/>文件大小 ≤ 2Mb"
		},
		success: function(data) {
			console.log(data)
		},
		error: function(err) {
			console.log(err)
		},
		// 队列数
		fileNumLimit: 1,
		auto: false
	});

• 多图片上传
  

//多上传图片
	var $moreImage = $('#moreImage').supload({
		server: '/uploadFilePath',
		pick: {
			multiple: true,
			label: "像素不限<br/>文件大小 ≤ 2Mb"
		},
		success: function(data) {
			console.log(data)
		},
		error: function(err) {
			console.log(err)
		},
		// 队列数
		fileNumLimit: 5,
		auto: false
	});

• 编辑初始化加载
  

//编辑预览
	var $previewImage = $('#previewImage').supload({
		server: '/uploadFilePath',
		pick: {
			multiple: true,
			label: "像素不限<br/>文件大小 ≤ 2Mb"
		},
		success: function(data) {
			console.log(data)
		},
		error: function(err) {
			console.log(err)
		},
		// 队列数
		fileNumLimit: 5,
		initFileUrl:["img/17e420c250804efe904a09a33796d5a16.jpg","img/87d8194bc9834e9f8f0228e9e530beb1.jpeg","img/sdfdsf.png"],
		auto: false
				});

• 预览图片
  

3.常见问题

• 调用WebUploader的removeFile()删除文件方法无法删除文件队列，在获取文件队列时使用getFiles(“complete”)，保障文件获取正常。