多图上传以及多图排序的方法及流程详解

多图上传以及多图排序的方法及流程详解

ps：本人亲测，阿里云2核4G5M的服务器性价比很高，新用户一块多一天，老用户三块多一天，最高可以买三年，感兴趣的可以戳一下：阿里云折扣服务器

所用插件包打包下载优快云地址：点这里

1、选择多图上传插件：pluploader.full.min.js（此插件经过试用非常好用，比百度的webuploader好用太多，但是需要翻墙下载，为了大家方便，上面包里都有）

2、用户选择多张图以后，该插件按队列，自动用ajax单张上传

3、服务器端使用单张图片处理操作即可，保存完毕后返回一个图片在服务器的地址

4、前端js在该插件的回调函数中根据返回的地址信息，将图片地址信息挨个保存在input的隐藏域中，用逗号隔开，如下图：

5、前端在用户点击提交表单按钮以后，表单提交之前这个间隙（因为只有在上传前的那一瞬间才能确定用户不再改变图片顺序了），计算出图片的顺序信息，并且把图片顺序信息保存在input的隐藏域中（多图上传插件用的是jquery.gridly.js）

6、在提交表单的时候需要提交存放图片服务器地址的input和图片排序input

7、这里的图片删除只需要传给服务器该图片在服务器的地址即可

注意：其实在前后台都可以对图片排序及图片信息进行数组相关操作

后台php处理程序（这里的$img_url就是最新的图片信息的顺序）：

这里的设计思路就是（下面的1、2是可以类比，所以可以进行关联）：

1、旧图片的路径信息（也就是上传以后的图片顺序信息）->新图片的路径信息

2、旧图片的排序信息（dom结构信息，span标签）->新图片的排序信息

//保存图片
$img_arry_info = explode(',',$wb_img); //旧图片图片信息
$img_arry_order = explode(',',$wb_img_order);  //新dom顺序
if (!empty($img_arry_order))
{
	foreach ($img_arry_order as $kor => $vor)
	{
   //$kor从0开始，$vor从传过来的新的排序的第一个数字开始，比如3开始
		$new_arry_img[$vor] = $img_arry_info[$kor];
	}
	//按照数组中的键重新排序
	ksort($new_arry_img);
}
$img_url = implode(',', $new_arry_img);

前台JS计算顺序的方法：
function ranking(ele) {
var arr = [];
$(ele).children().each(function () {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var topN = parseInt(top / 135) * 3;
    var leftN = parseInt(left / 140);
    var index = topN + leftN;

    arr.push(index);
});

return arr;
}

前端计算图片顺序信息注意事项：

因为前端不好获取每一张图片所对应的固定位置，所以获取每个展示图片信息的dom结构的顺序,就是span标签的顺序，比如：

1、下面的图片是默认顺序0，1，2，3（上传时的顺序，也是dom结构的顺序），顺序是根据图片后面圈出的位置信息计算得出的

2、现在把数字1移动到最开头，如果图片与排序是一一对应的，那么顺序应该是3，0，1，2，但由于这里图片与排序不好一一对应，只能与下面的dom结构，就是span对应，排序是按照后面的位置信息计算得出，就相当于移动的是这个span标签，而不是图片，所以得出的顺序是1，2，3，0

多图上传插件初始化代码:

$(function() {
// 多图上传plupload-master 插件
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
    browse_button: 'filePicker',
    url: '/order_wb/img_deal.do',
    flash_swf_url: 'uploader/Moxie.swf',
    silverlight_xap_url: 'uploader/Moxie.xap',
    filters: {
	mime_types: [ //只允许上传图片文件
	    {title: "图片文件", extensions: "jpg,gif,png"}
	],
	max_file_size: '3mb' //最大只能上传400kb的文件
    }
});
uploader.init(); //初始化

//绑定文件添加进队列事件
uploader.bind('FilesAdded', function (uploader, files) {
    var len = files.length;
    var boxlength = $('#fileList').children().size();

    if (len + boxlength > 9) {
	layer.msg('最多上传9张图片');
	files.splice(9 - boxlength, len + boxlength - 9);
	uploader.splice(9, 9999); // 修改upload存储的文件个数
	len = 9 - boxlength;
    }

    for (var i = 0; i < len; i++) {
	// var file_name = files[i].name; //文件名
	//构造html来更新UI
	var html = '';

	html += '<span class="item" id="file-' + files[i].id + '">';
	html += '<span class="turnoff-pic"><em>×</em></span>';
	html += '</span>';

	$(html).appendTo('#fileList');
	!function (i) {
	    previewImage(files[i], function (imgsrc) {
		$('#file-' + files[i].id).append('<img src="' + imgsrc + '" />');
	    })
	}(i);
	// 判断为最后一个时，初始化拖拽排序插件
	if (i === len - 1) {
	    $('#fileList').show().gridly({  //图片拖动 切换位置
		base: 60,   // px
		gutter: 10, // 底边间距 10px
		columns: 6
	    });

	    uploader.start();
	}
    }
});

uploader.bind('FileUploaded', function (uploader, file, responseObject) {
    //上传成功
    var img_info = $("#wb_img").val();
    var res_text = responseObject.response;
    //去除引号、反斜杠
    res_text = res_text.replace(/\\/g, '');
    res_text = res_text.replace(/"/g, '');
    if (img_info == '') {
	$("#wb_img").val(res_text);
    }
    else {
	var new_info = img_info + ',' + res_text;
	$("#wb_img").val(new_info)
    }
});

//plupload-master版本中为我们提供了mOxie对象
//有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API
//如果你不想了解那么多的话，那就照抄本示例的代码来得到预览的图片吧
function previewImage(file, callback) { //file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
    if (!file || !/image\//.test(file.type)) return; //确保文件是图片
    if (file.type == 'image/gif') { //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
	var fr = new mOxie.FileReader();
	fr.onload = function () {
	    callback(fr.result);
	    fr.destroy();
	    fr = null;
	}
	fr.readAsDataURL(file.getSource());
    } else {
	var preloader = new mOxie.Image();
	preloader.onload = function () {
	    preloader.downsize(300, 300);//先压缩一下要预览的图片,宽300，高300
	    var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
	    callback && callback(imgsrc); //callback传入的参数为预览图片的url
	    preloader.destroy();
	    preloader = null;
	};
	preloader.load(file.getSource());
    }
}

// 删除要上传的图片
$(".prePic").on("click", ".turnoff-pic", function () {
    var str = $("#wb_img").val() || "";
    var strArr = str.split(","); // 分割字符串，数组保存。
    var num = $(this).parent().index();
    var newstr = "";

    //ajax删除图片
    $.ajax({
	url: '/order_wb/img_delete.do',
	data: {"img_url": strArr[num]},
	type: 'post',
	success: function (a) {
	    if (a != 1) {
		layer.msg('删除失败');
		return false;
	    }
	}
    });

    strArr.splice(num, 1);
    newstr = strArr.join(",");

    $("#wb_img").val(newstr);
    uploader.splice(num, 1);
    $(this).parent().remove();
});
});