多图上传以及多图排序的方法及流程详解
ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器
所用插件包打包下载CSDN地址:点这里
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();
});
});