开发多图片上传且可拖拽排序功能详解

86 阅读 0 评论 57 点赞

我是靠谱客的博主诚心月亮，最近开发中收集的这篇文章主要介绍开发多图片上传且可拖拽排序功能详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简述

最近的商城项目中遇到这样一个需求，客户要求在上传商品图片时可多图片上传，并且可以拖拽排序。前面多图片上传比较好实现，网上一大片的教程、插件可供学习使用，可又要求可以拖拽排序，我也没找到现有的代码，自己也就研究着尝试实现了下，实现的结果还是比较好的。大家有需要的可以跟着学习下。

在这里我使用了jQuery的file upload插件用于实现多图片上传，使用了jQuery拖拽排序插件dragarrange用于实现拖拽排序。后台使用PHP进行图片文件接受。下面就直接贴代码、效果图了。

所有的源码我已上传到码云和GitHub，有需要的可自行下载。

源码

前端（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图片可拖拽demo</title>
</head>
<body>
<style>
    .upload-thumb {
        display: block !important;
        float: left;
        width: 147px !important;
        height: 147px !important;
        position: relative;
    }

    .upload-thumb img {
        width: 100%;
        height: 100%;
    }

    .img-box, .sku-img-box {
        overflow: hidden;
    }

    .off-box, .sku-off-box {
        position: absolute;
        width: 18px;
        height: 18px;
        right: 0;
        top: 0;
        line-height: 18px;
        background-color: #FFF;
        cursor: pointer;
        text-align: center;
    }

    .black-bg {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .hide {
        display: none;
    }

    .img-error {
        color: red;
        height: 25px;
        line-height: 25px;
        display: none;
    }

    .hint {
        font-size: 12px;
        line-height: 16px;
        color: #BBB;
        margin-top: 10px;
    }

    .ncsc-goods-default-pic .goodspic-uplaod .handle {
        height: 30px;
        margin: 10px 0;
    }

    .ncsc-upload-btn, .upload-btn {
        vertical-align: top;
        width: 80px;
        height: 30px;
        margin: 10px 5px 0 0;
        display: block;
        position: relative;
        z-index: 1;
    }

    .ncsc-upload-btn {
        display: inline-block;
        margin: 0 5px 0;
        vertical-align: middle;
    }

    .ncsc-upload-btn span, .upload-btn span {
        width: 80px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        cursor: pointer;
    }

    .ncsc-upload-btn .input-file, .upload-btn .input-file {
        width: 80px;
        height: 30px;
        padding: 0;
        margin: 0;
        border: none 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }

    .ncsc-upload-btn p, .upload-btn p {
        font-size: 12px;
        line-height: 20px;
        background-color: #F5F5F5;
        text-align: center;
        color: #666;
        width: 78px;
        height: 20px;
        padding: 4px 0;
        border: solid 1px;
        border-color: #DCDCDC #DCDCDC #B3B3B3 #DCDCDC;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        z-index: 1;
    }

    select, input[type="file"] {
        height: 30px;
        line-height: 30px;
    }

    .base {
        width: 80%;
        background-color: #fff;
        border-radius: 20px;
        margin: auto;
    }

</style>


<h2 style="text-align:center;margin-top: 120px;">多图片上传DEMO（可拖动排序）</h2>
<div class="base">
    <div id="goods_picture_box" class="controls" style="background-color:#FFF;border: 1px solid #E9E9E9;">
        <div class="ncsc-goods-default-pic">
            <div class="goodspic-uplaod" style="padding: 15px;">
                <div class='img-box' style="min-height:160px;">
                    <div class="upload-thumb" id="default_uploadimg">
                        <img src="album/default_goods_image_240.gif">
                    </div>
                </div>
                <div class="clear"></div>
                <span class="img-error">最少需要一张图片作为商品主图</span>
                <p class="hint">上传多张图片，<font color="red">支持同时上传多张图片,多张图片之间可随意调整位置</font>；支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存在uploads文件夹中。
                </p>
                <div class="handle">
                    <div class="ncsc-upload-btn">
                        <a href="javascript:void(0);">
				<span>
					<input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple"/>
				</span>
                            <p>图片上传</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="album_id" value="1"/>
<script src="js/jquery-1.8.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/drag-arrange.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajax_file_upload.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.fileupload.js" charset="utf-8"></script>
<script type="text/javascript">

    var dataAlbum;
    var UPLOADGOODS = 'UPLOAD_GOODS';//存放商品图片
    $(function () {
        //给图片更换位置事件
        $('.draggable-element').arrangeable();

        var album_id = $("#album_id").val();
        dataAlbum = {
            "album_id": album_id,
            "type": "1,2,3,4",
            'file_path': UPLOADGOODS
        };
        // ajax 上传图片
        var upload_num = 0; // 上传图片成功数量
        $('#fileupload').fileupload({
            url: "upload.php",
            dataType: 'json',
            //formData:dataAlbum,
            add: function (e, data) {
                $("#goods_picture_box .img-error").hide();
                $("#goods_picture_box #default_uploadimg").remove();
                //显示上传图片框
                var html = "";
                $.each(data.files, function (index, file) {
                    html += '<div class="upload-thumb draggable-element"  nstype="' + file.name + '">';
                    html += '<img nstype="goods_image" src="album/uoload_ing.gif">';
                    html += '<input type="hidden"  class="upload_img_id" nstype="goods_image" value="">';
                    html += '<div class="black-bg hide">';
                    html += '<div class="off-box">×</div>';
                    html += '</div>';
                    html += '</div>';
                });
                $(html).appendTo('#goods_picture_box .img-box');
                //模块可拖动事件
                $('#goods_picture_box .draggable-element').arrangeable();
                data.submit();
            },
            done: function (e, data) {
                var param = data.result;
                $this = $('#goods_picture_box div[nstype="' + param.origin_file_name + '"]');
                if (param.state > 0) {
                    $this.removeAttr("nstype");
                    $this.children("img").attr("src", param.file_name);
                    $this.children("input[type='hidden']").val(param.file_id);
                } else {
                    $this.remove();
                    if ($("#goods_picture_box .img-box .upload-thumb").length == 0) {
                        var img_html = '<div class="upload-thumb" id="default_uploadimg">';
                        img_html += '<img src="album/default_goods_image_240.gif">';
                        img_html += '</div>';
                        $("#goods_picture_box .img-box").append(img_html);
                    }
                    $("#goods_picture_box .img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();
                }
            }
        })

        //图片幕布出现
        $(".draggable-element").live('mouseenter', function () {
            $(this).children(".black-bg").show();
        });
        //图片幕布消失
        $(".draggable-element").live('mouseleave', function () {
            $(this).children(".black-bg").hide();
        });

        //删除页面图片元素
        $(".off-box").live('click', function () {
            if ($(".img-box .upload-thumb").length == 1) {
                var html = "";
                html += '<div class="upload-thumb" id="default_uploadimg">';
                html += '<img nstype="goods_image" src="album/default_goods_image_240.gif">';
                html += '<input type="hidden" name="image_path" id="image_path" nstype="goods_image" value="">';
                html += '</div>';
                $(html).appendTo('.img-box');
            }
            $(this).parent().parent().remove();
        });


    });
	//备用
    function img_upload() {

    }
    //图片上传方法
	//此方法备用，后续在使用中需要进行相应的修改，不能直接使用。
	//有的一个页面有可能有两个上传图片地方，所以添加此方法。届时在
	//<input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple"/>
	//增加一个onclick事件就可以了：οnclick="file_upload(this);"
    function file_upload(obj) {
        var spec_id = $(obj).attr("spec_id");
        var spec_value_id = $(obj).attr("spec_value_id");
        $('.sku-draggable-element' + spec_id + '-' + spec_value_id).arrangeable();
        $(obj).fileupload({
            url: "upload.php",
            dataType: 'json',
            formData: dataAlbum,
            add: function (e, data) {
                var box_obj = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
                var spec_id = box_obj.attr("spec_id");
                var spec_value_id = box_obj.attr("spec_value_id");
                box_obj.find(".img-error").hide();
                box_obj.find("#sku_default_uploadimg").remove();
                //显示上传图片框
                var html = "";
                $.each(data.files, function (index, file) {
                    html += '<div class="upload-thumb sku-draggable-element' + spec_id + '-' + spec_value_id + ' sku-draggable-element"  nstype="' + file.name + '">';
                    html += '<img nstype="goods_image" src="album/uoload_ing.gif">';
                    html += '<input type="hidden"  class="sku_upload_img_id" nstype="goods_image" spec_id="" spec_value_id="" value="">';
                    html += '<div class="black-bg hide">';
                    html += '<div class="sku-off-box">×</div>';
                    html += '</div>';
                    html += '</div>';
                });

                box_obj.find('.sku-img-box').append(html);
                //模块可拖动事件
                $('.sku-draggable-element' + spec_id + '-' + spec_value_id).arrangeable();
                data.submit();
            },
            done: function (e, data) {
                var box_obj = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
                var spec_id = box_obj.attr("spec_id");
                var spec_value_id = box_obj.attr("spec_value_id");
                var param = data.result;
                $this = box_obj.find('div[nstype="' + param.origin_file_name + '"]');
                if (param.state > 0) {
                    $this.removeAttr("nstype");
                    $this.children("img").attr("src", __IMG(param.file_name));
                    $this.children("input[type='hidden']").val(param.file_id);
                    $this.children("input[type='hidden']").attr("spec_id", spec_id);
                    $this.children("input[type='hidden']").attr("spec_value_id", spec_value_id);
                    //将上传的规格图片记录
                    for (var i = 0; i < $sku_goods_picture.length; i++) {
                        if ($sku_goods_picture[i].spec_id == spec_id && $sku_goods_picture[i].spec_value_id == spec_value_id) {
                            $sku_goods_picture[i]["sku_picture_query"].push({
                                "pic_id": param.file_id,
                                "pic_cover_mid": param.file_name
                            });
                        }
                    }
                } else {
                    $this.remove();
                    if (box_obj.find(".upload-thumb").length == 0) {
                        var img_html = '<div class="upload-thumb" id="default_uploadimg">';
                        img_html += '<img src="album/default_goods_image_240.gif">';
                        img_html += '</div>';
                        box_obj.find(".sku-img-box").append(img_html);
                    }
                    box_obj.find(".img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();
                }
            }
        })
    }
</script>
</body>

</html>

后台（upload.php）

<?php

/**
 * =======================================
 * Created by ZHIHUA·WEI
 * Author: ZHIHUA·WEI
 * Date: 2018/6/29
 * Time: 上午 9:08
 * Project: 多图片上传DEMO(可拖拽排序)
 * Power: 接收文件
 * =======================================
 */
//允许上传文件格式
$typeArr = array("jpg", "png", "gif", "jpeg");
//上传路径
$path = "uploads/";

if (isset($_POST)) {
    $name = $_FILES['file_upload']['name'];
    $size = $_FILES['file_upload']['size'];
    $name_tmp = $_FILES['file_upload']['tmp_name'];
    if (empty($name)) {
        echo json_encode(array("error" => "您还未选择图片"));
        exit;
    }
    //获取文件类型
    $type = strtolower(substr(strrchr($name, '.'), 1));

    if (!in_array($type, $typeArr)) {
        echo json_encode(array("error" => "清上传jpg,png或gif类型的图片！"));
        exit;
    }
    //上传大小
    if ($size > 5 * 1024 * 1024) {
        echo json_encode(array("message" => "图片大小已超过5m！"));
        exit;
    }
    $time_str = time() . rand(10000, 99999);
    //图片名称
    $pic_name = $time_str . "." . $type;
    //上传后图片路径+名称
    $pic_url = $path . $pic_name;
    //临时文件转移到目标文件夹
    if (move_uploaded_file($name_tmp, $pic_url)) {
        //这些数据可根据需要进行返回，字段如果修改需要和前端保持一致
        $ret = array(
            'file_id' => $time_str,
            'file_name' => $pic_url,
            'origin_file_name' => $name,
            'file_path' => $pic_url,
            'state' => '1',
        );
        echo json_encode($ret);
    } else {
        $ret = array(
            'message' => "图片上传失败",
            'origin_file_name' => $name,
            'state' => '0',
        );
        echo json_encode($ret);
    }
}