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

最新推荐文章于 2024-08-16 09:30:00 发布
最新推荐文章于 2024-08-16 09:30:00 发布
阅读量7.3k 收藏 15
点赞数 2
分类专栏： PHP HTML&JS 文章标签： 多图片上传 可拖拽排序 多图片上传且可拖拽排序 图片上传可排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhihua_W/article/details/80864997
版权
PHP 同时被 2 个专栏收录
68 篇文章 1 订阅
订阅专栏
HTML&JS
15 篇文章 0 订阅
订阅专栏

简述

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

        在这里我使用了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);
    }
}

效果图


ZhiHuaWei
关注
专栏目录
拖拽排序插件dragarrange
06-01
基于jQuery的拖拽排序插件dragarrange
vue图片批量上传，支持拖拽排序
qq_42431718的博客
11-09 1096
1，ui用的是elementui 需要安装 2，draggable插件，支持拓展排序 3，接口做了处理，可以显示上传进度 //上传图片，上传视频 export function uploadFile (formData, config = Function) { return axios.post('https:xxxxurl', formData, { onUploadProgress: progressEvent => { var complete = pr
图片上传并可拖拽
最新发布
温暖前端的博客
08-16 298
【代码】图片上传并可拖拽。
jquery上传图片_thinkphp5+layui实现多图上传，可以实现图片自由排序，自由删除
weixin_39640372的博客
11-28 188
多图上传页面html代码.layui-upload-img { width: 90px; height: 90px; margin: 0; }.pic-more { width:100%; left; margin: 10px 0px 0px 0px;}.pic-more li { width:90px; float: left; margin-right: 5px;}.pic-more li ....
图片拖动上传jquery php,图片上传拖动排序插件(原创)
weixin_34405261的博客
03-27 354
插件描述：一个基于Stable的可拖动排序的图片上传插件 [1.1.0]它可以用于商品主图的排序更新时间：2019-07-1916:33:39更新说明：修复了回调取不到ajax请求数据的错误，完善实例化返回方法发布时间：2019-07-1711:56:37使用方法1. 在html中加下如下代码2. 引用jq库并调用3. 调用vara=$("#upload_duixiang").FraUp...
多图片上传、拖拽上传、拖动排序、图片预览效果
xht1351549230的博客
09-16 1570
多图片上传、拖拽上传、拖动排序、图片预览效果 效果如下： 直接将如下代码复制到html文件中运行即可： <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery多图片上传、拖拽上传、拖动排序、图片预览效果</title> <!--放到项目中写法--> <script src="./jquery.min.js">&lt
若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小（公告页面）
12-17
针对原版前台页面进行了简单修改，图片上传后可以拖拽修改图片大小
jquery图片拖拽排序.rar
07-04
其中，图片拖拽排序功能是一个常见且实用的交互设计，它允许用户通过直观的手势来调整图片的顺序，尤其适用于相册、画廊等应用场景。本文将深入探讨如何使用jQuery实现这一功能。 jQuery是一个强大的JavaScript库，...
jquery - 1.4.2 图片拖拽排序实例
02-21
【jQuery - 1.4.2 图片拖拽排序实例详解】 在Web开发中，实现用户界面的交互性是提高用户体验的重要手段。jQuery库因其简洁的API和强大的功能，成为了JavaScript开发者常用的选择。本实例主要关注的是使用jQuery ...
jQuery网格布局图片拖动排序代码.zip
09-25
其中，网格布局与图片拖动排序功能是常见且实用的设计元素，尤其适用于图片展示、画廊或者产品目录等场景。本文将详细解析基于jQuery实现的网格布局图片拖动排序代码，帮助开发者理解和应用这一技术。 首先，jQuery...
Vue2 - 详细实现列表拖曳排序功能，列表或表格自定义元素拖动排序效果，用鼠标按住拖动列表进行手动排序并颠倒排序顺序时有动画，用户鼠标或手势拖动列表改变排序顺序（支持滚动条内嵌套列表，贴边会自动下移
王佳斌
07-09 2642
vue2，nuxt2，列表，拖曳排序，拖动排序，拖拽排序，顺序排列，拖拽组件，拖拽排序插件，列表拖曳排序，在滚动条内排序无法贴边上下移动，表格行数据如何拖动排序，表格拖动改变顺序，vue拖拽排序，拖曳元素，拖拽任意组件并改变数据排序，改变数据的顺序如何做，vuedraggable，数组上下移动并更改排序值，上移下移排序,列表排序，Vue2中的列表拖拽排序，vue2拖拽组件Vue.Draggable，手机移动端，pc网页，网站，h5，手机H5公众号网页，移动端触屏拖动，手机触摸拖动无效，列表排序了但是数据没有
jQuery拖拽排序插件dragarrange
06-19
很好用的jQuery拖拽排序插件，兼容IE浏览器
拖拽插件drag.js
01-24
拖拽插件、drag 拖拽插件、drag 拖拽插件、drag 拖拽插件、drag
jQuery拖拽插件drag.js
02-15
jQuery拖拽插件drag.js
多图上传type=[file]可拖拽排序
阿狸狸阿狸狸呀的博客
04-28 1490
html结构 &lt;div class="uploaderWrap"&gt; &lt;div class="fileHead file_con"&gt; &lt;input type="file" name="uploadFile" id="m_upload" multiple="multiple"&gt;&am
列表拖动排序
shiyuezhong的专栏
04-27 3616
Drag Arrange Example body { font-family: arial; background: rgb(242, 244, 246); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: n
laravel-admin中的插件overtrue/laravel-ueditor的图片上传配置【富文本编辑器上传】
robin_sky的博客
03-12 3724
1、laravel-ueditor的安装【安装步骤】 安装 composer require codingyu/ueditor 发布overtrue/laravel-ueditor的资源 php artisan vendor:publish --provider='Overtrue\LaravelUEditor\UEditorServiceProvider' 配置 在confi...
app拖拽自由排列
qq_42396791的博客
10-23 1786
上次为大家分享关于PC端端的拖拽功能，相信还有更多网友需要移动端的拖拽 jQuery的拖动排序，DIV拖拽排序代码，实现了PC和应用程序的拖拽 这次为大家分享移动版拖拽 需要插件： 1.jquery.min.js 2.drag-arrange.js 废话不多说上代码 <!DOCTYPE html> <html> <head> <met...
使用jQuery和HTML5开发拖拽图片上传应用
"这篇文章主要介绍了如何使用jQuery和HTML5技术开发一个支持拖拽上传图片的Web应用。通过结合HTML5的FileReader API、Drag & Drop API以及AJAX技术，我们可以创建一个用户友好的图片上传界面，包括图片预览和上传...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值