h5 plus实现照片上传功能

该功能实现主要用到h5 plus 的gallery和uploader两个接口，gallery调用手机相册选取照片，uploader用来上传选择的图片到服务器。本人开始研究h5刚十几天，不足之处，希望各位批评指正。

主要分两步，如下:

1, 调用手机相册选取照片，

2, 上传图片到服务器。

首先，我们来完成第一步，实现从相册选取照片，代码如下。

var ifs = []; // 图片路径列表。存放选择的图片路径。
		$('#choose_img').click(function() {
			plus.gallery.pick(function(e) {
				// 成功的回调
				ifs = [];
				$("#goodscontainer").children().remove('.goods_item2');
				ifs = e.files;
				var first_item = $("#choose_img");
				var xxx = null; // 添加图片的盒子 预览
				var div = document.getElementById("goodscontainer");
				for(var i in e.files) {
					if(i == 0) {

						xxx = '
' +
							'' +
							'
' +
							'
' +
							'封面' +
							'
';
					} else {
						xxx = '
' +
							'' +
							'
';
					}
					var div2 = $(xxx + '');
					div2.insertBefore($(first_item));
					//div2.appendTo($(div));
				}
			}, function(e) {
				return; // 用户取消了选择图片
			}, {
				multiple: true,
				filter: 'image',
				animation: true,
				maximum: 6,
				system: false,
				selected: ifs,
				onmaxed: function() {
					plus.nativeUI.alert("最多只能选择6张图片");
				}
			})
		});

第二步，上传照片。后台是Spring MVC+hibernate.弹出层是ayer mobile弹出层。

		// 上传图片
		function uploadImg(goodsID) {
			var serverUrl = plus.storage.getItem("ServerUrl");
			var upLoadUrl = serverUrl + "addgoods3.do?method=addImg&length=" + ifs.length + "&xuhao=";
			// 创建上传任务
			var count = 0;
			for(var i = 0; i < ifs.length; i++) {
				// 新建上传任务。
				var task = plus.uploader.createUpload(upLoadUrl + i + "&goodsid=" + goodsID, {
						method: "POST",
						retry: 2
					},

					// 上传成功的回调方法。
					function(upload, status) {
						if(upload.responseText == "yes") {
							count++;
							if(count == ifs.length) {
								plus.nativeUI.closeWaiting();
								ifs.splice(0, ifs.length);
								setTimeout(function() {}, 2);
								layer.open({
									content: '
添加成功！
',
									time: 3
								});
								// 重新加载本页面
								setTimeout(function() {
									location.reload();
								}, 3000);

							}
						}
					}
				);
				task.addFile(ifs[i], {
					key: "testimg"
				});
				task.start();
			}
		}

 至此，核心功能的代码就完成了，剩下的就是对用户体验和界面的优化了，至于后台处理，各位只要记住一点， Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范。

有需要源代码的可留言。包括css文件。