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

简述

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

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

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

源码

前端（index.html）

    
    





多图片上传DEMO（可拖动排序）

    

        

            

                

                    

                        
                    
                
                

                最少需要一张图片作为商品主图
                
上传多张图片，支持同时上传多张图片,多张图片之间可随意调整位置；支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存在uploads文件夹中。
                
                

                    

                        
				
					
				
                            
图片上传
                        
                    
                
            
        
    

后台（upload.php）

 "您还未选择图片"));
        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);
    }
}

效果图