精华内容
下载资源
问答
  • 前面图片上传比较好实现,网上一大片的教程、插件可供学习使用,可又要求可以拖拽排序,我也找到现有的代码,自己也就研究着尝试实现了下,实现的结果还是比较好的。大家有需要的可以跟着学习下。 在这里我使用...

    简述

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

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

    效果图


    展开全文
  • 上回提到 PHP的单个文件上传个单文件上传多文件上传 这里给出 三种方式的统一实现 下面先给出各种方式的文件提交页面: 单个文件上传 upload1.php 单文件上传 请选择您要上传文件: ...

    上回提到 PHP的单个文件上传、多个单文件上传、多文件上传

    这里给出 三种方式的统一实现

    下面先给出各种方式的文件提交页面:

    单个文件上传 upload1.php

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单文件上传</title>
    </head>
    <body>
        <form action="doAction5.php" method="post" enctype="multipart/form-data">
            请选择您要上传的文件:
            <input type="file" name="myFile"/><br/>
            <input type="submit" value="上传文件"/>
        </form>
    </body>
    </html>
    

    多个单文件上传 upload2.php

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多个单文件上传</title>
    </head>
    <body>
        <form action="doAction5.php" method="post" enctype="multipart/form-data">
            请选择您要上传的文件:<input type="file" name="myFile1"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile2"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile3"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile4"/><br/>
            <input type="submit" value="上传文件"/>
        </form>
    </body>
    </html>
    

    多文件上传 upload3.php

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多文件上传</title>
    </head>
    <body>
        <form action="doAction5.php" method="post" enctype="multipart/form-data">
            请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
            <input type="submit" value="上传文件"/>
        </form>
    </body>
    </html>
    
    混合方式文件上传 upload4.php

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>混合方式文件上传</title>
    </head>
    <body>
        <form action="doAction5.php" method="post" enctype="multipart/form-data">
            请选择您要上传的文件:<input type="file" name="myFile1"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile2"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile[]"/><br/>
            请选择您要上传的文件:<input type="file" name="myFile[]" multiple="multiple"/><br/>
            <input type="submit" value="上传文件"/>
        </form>
    </body>
    </html>
    

    文件上传处理 doAction5.php

    <?php
    /**
     * Created by PhpStorm.
     * User: DreamBoy
     * Date: 2016/4/8
     * Time: 21:39
     */
    header('content-type:text/html;charset=utf-8');
    include_once 'upload.func.php';
    
    $files = getFiles();
    //print_r($files);
    
    foreach($files as $fileInfo) {
        $res = uploadFile($fileInfo);
        echo $res['mes'],'<br/>';
    
        if(isset($res['dest'])) {
            $uploadFiles[] = $res['dest'];
        }
    }
    //过滤掉上传失败的文件
    /**
     * array_values() 函数返回一个包含给定数组中所有键值的数组,但不保留键名。
     * 提示:被返回的数组将使用数值键,从 0 开始并以 1 递增。
     */
    /**
     * array_filter() 函数用回调函数过滤数组中的值。
     * 该函数把输入数组中的每个键值传给回调函数。如果回调函数返回 true,
     * 则把输入数组中的当前键值返回结果数组中。数组键名保持不变。
     */
    //这里使用array_filter过滤掉数组中的空内容
    if(isset($uploadFiles)) {
        $uploadFiles=array_filter($uploadFiles);
    
        print_r($uploadFiles);
    }


    实现文件上传的函数 upload.func.php

    <?php
    /**
     * Created by PhpStorm.
     * User: DreamBoy
     * Date: 2016/4/8
     * Time: 21:41
     */
    /**
     * 构建上传文件信息
     * @return mixed
     */
    function getFiles() {
        $i = 0;
        foreach($_FILES as $file) {
            //单文件或者多个单文件上传
            if(is_string($file['name'])) {
                $files[$i] = $file;
                $i++;
            } //多文件上传
            elseif(is_array($file['name'])) {
                foreach($file['name'] as $key=>$val) {
                    $files[$i]['name'] = $file['name'][$key];
                    $files[$i]['type'] = $file['type'][$key];
                    $files[$i]['tmp_name'] = $file['tmp_name'][$key];
                    $files[$i]['error'] = $file['error'][$key];
                    $files[$i]['size'] = $file['size'][$key];
                    $i++;
                }
            }
        }
        return $files;
    }
    
    /**
     * 获取文件扩展名
     */
    function getExt($filename) {
        return strtolower(pathinfo($filename,PATHINFO_EXTENSION));
    }
    
    /**
     * 获取唯一字符串
     */
    function getUniName() {
        return md5(uniqid(microtime(true), true));
    }
    
    /**
     * 针对于单文件、多个单文件、多文件的上传
     * @param array $fileInfo
     * @param string $path
     * @param bool $flag
     * @param int $maxSize
     * @param array $allowExt
     * @return array
     */
    function uploadFile($fileInfo, $path='./uploads',$flag=true,$maxSize=1048576,$allowExt = array('jpeg','jpg','gif','png')) {
        //$allowExt = array('jpeg','jpg','gif','png');
        //$flag = true;
        //$maxSize = 1048576; //1M
    
        $res = array();
    
        //判断错误号
        if($fileInfo['error'] == UPLOAD_ERR_OK) {
            //检测上传文件的大小
            if($fileInfo['size'] > $maxSize) {
                $res['mes'] = $fileInfo['name'] . '上传文件过大';
            }
    
            $ext = getExt($fileInfo['name']);
            //检测上传文件的文件类型
            if(!in_array($ext, $allowExt)) {
                $res['mes'] = $fileInfo['name'] . '非法文件类型';
            }
    
            //检测是否是真是的图片类型
            if($flag) {
                if(!getimagesize($fileInfo['tmp_name'])) {
                    $res['mes'] = $fileInfo['name'] . '不是真实图片类型';
                }
            }
    
            //检测文件是否是通过HTTP POST上传上来的
            if(!is_uploaded_file($fileInfo['tmp_name'])) {
                $res['mes'] = $fileInfo['name'] . '文件不是通过HTTP POST方式上传上来的';
            }
    
            if($res) return $res;
    
            //$path = './uploads';
            if(!file_exists($path)) {
                mkdir($path, 0777, true);
                chmod($path, 0777);
            }
            $uniName = getUniName();
            $destination = $path . '/' . $uniName . '.' . $ext;
            if(!move_uploaded_file($fileInfo['tmp_name'],$destination)) {
                $res['mes'] = $fileInfo['name'] . '文件移动失败';
            }
    
            $res['mes'] = $fileInfo['name'] . '上传成功';
            $res['dest'] = $destination;
    
            return $res;
        } else {
            //匹配错误信息
            switch($fileInfo['error']) {
                case 1:
                    $res['mes'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值';
                    break;
                case 2:
                    $res['mes'] = '超过了表单MAX_FILE_SIZE限制的大小';
                    break;
                case 3:
                    $res['mes'] = '文件部分被上传';
                    break;
                case 4:
                    $res['mes'] = '没有选择上传文件';
                    break;
                case 6:
                    $res['mes'] = '没有找到临时目录';
                    break;
                case 7:
                case 8:
                    $res['mes'] = '系统错误';
                    break;
            }
            return $res;
        }
    }




    展开全文
  • PHP上传多文件图片程序代码

    千次阅读 2011-09-27 16:01:22
    1.在同级目录下建立upload文件夹 2.将下面代码复制到upload.php中 $uptypes=array( //上传文件的ContentType格式 'image/jpg', 'image/jpeg',

    1.在同级目录下建立upload文件夹

    2.将下面代码复制到upload.php中

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <?php   
     $uptypes=array(
    //上传文件的ContentType格式
            'image/jpg',
            'image/jpeg',
            'image/png',
            'image/pjpeg',
            'image/gif',
            'image/bmp',
            'image/x-png',
    		'application/msword',//doc
    		'application/vnd.openxmlformats-officedocument.wordprocessingml.document',//docx
    		'application/vnd.openxmlformats-officedocument.presentationml.presentation',//pptx 
    		'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',//xlsx
    		'text/plain'
                    );
    $max_file_size=2000000;     //上传文件大小限制, 单位BYTE
    $dir="upload/";          //上传文件路径
    if ($_SERVER['REQUEST_METHOD'] == 'POST')
    {
       $file = $_FILES['upfile']['name'];
       foreach($file as $key=>$item){
       if($item != ''){
             if (!is_uploaded_file($_FILES['upfile']['tmp_name'][$key]))//是否存在文件
       	     {
                echo "图片不存在!";  
    			exit;
             }
            if($max_file_size < $_FILES['upfile']['size'][$key])//检查文件大小
       	    {
                echo "文件太大!";
                exit;
            }
       if(!file_exists($dir))
           {
              mkdir($dir);
           }
        $filename=$_FILES['upfile']['tmp_name'][$key];
    	$image_size = getimagesize($filename);
    	$pinfo = pathinfo($file[$key]);
    
    	$ftype = $pinfo['extension'];
    	$destination = $dir.time().$file[$key];
        if (file_exists($destination) && $overwrite != true)
        {
            echo "同名文件已经存在了";
            exit;
        }
    
        if(!move_uploaded_file ($filename, $destination))
        {
            echo "移动文件出错";
            exit;
        }
        $pinfo=pathinfo($destination);
        $fname=$pinfo['basename'];
        echo " <font color=red>已经成功上传</font><br>文件名:  <font color=blue>".$dir.$fname."</font><br>";
        echo " 宽度:".$image_size[0];
        echo " 长度:".$image_size[1];
        echo "<br> 大小:".$_FILES['upfile']['size']." bytes";
    
    }				
    
    	echo "<br>图片预览:<br>";
        echo "<img src=\"".$destination."\" width=".($image_size[0]*(1/4))." height=".($image_size[1]*(1/4));
        echo " alt=\"图片预览:\r文件名:".$destination."\r上传时间:\">";
    	echo "<br>";
    		}
    	}
    
     ?>
    <form method="post" enctype="multipart/form-data" action="" name="ff" id="ff" >
        <input type="file" name="upfile[]" />
        <input type="file" name="upfile[]" />
        <label>
          <input type="submit" name="submit" id="submit" value="按钮"/>
        </label>
     </form>
    ps:上传时,需要上传两个。不然会报错,代码不是很完善,只是给出一个思路。自己可以根据此来编写代码
    展开全文
  • java处理百度编辑器ueditor上传的图片

    java处理百度编辑器ueditor上传的图片等多媒体文件

        开发项目过程中,一般会涉及到采用富文本编辑器处理“内容”之类的业务,而这内容中,难免会上传各种图片、视频等。而一般采用的富文本编辑器常见的有ueditor百度编辑器、widgEditor等等。我一般采用的百度编辑器ueditor。虽然ueditor可以对上传的图片进行配置,在下载的ueditor文件夹下找到config.json,就可以进行配置。如下所示:


        一般情况下,如果要求不严格,那就将上传的图片保存那个目录就好了。但是因为考虑到这种情况:“用户频繁上传 很多张图片,假设是10张,最终却只保留了一张,那么这时候服务器保存下来是那10张图片”,原因很简单,因为ueditor会在用户上传图片时就把图片移到你配置好的那个文件夹目录下,所以就出现了上面的情况。

        如果严格考虑这种情况的话,那么就需要对上传的图片进行处理了。本文就是分享如何处理这种情况!

        首先,ueditor会保留上面截图的那个图片上传目录的配置,如:/temporary/2017-07-22/image/xxxxx,这个目录随你配置,然后,不管你在百度编辑器上传了多少图片,我只需要在ueditor的content中去查找实际要保存的image,注意,在content中,你会发现里面的图片存储正是以html格式的<img>开头的,而这正是进行处理的切入点,最后,找到了所有的img标签,就进行移动的处理,移动到我们指定的文件夹目录下,并将真实路径返回替换掉content中相应的img里面的路径。

        好了,下面就是对ueditor的内容content进行处理的代码:

    /**
     * 处理百度编辑器的内容的图片:jsoup进行处理
     * author: steadyjack
     * @param content:百度编辑器的内容
     * date: 2017年6月19日 下午10:29:45
     */
    public static String manageUeditorImage(String content) throws Exception{
    	try {
    		if (!Strings.isNullOrEmpty(content)) {
    			Document doc=Jsoup.parse(content);
    			
    			Elements imageList=doc.select("img"); //处理的切入点,找img标签
    			if (imageList!=null && imageList.size()>0) {
    				for(int i=0;i<imageList.size();i++){
    					Element image=imageList.get(i);
    					String oldImage=image.toString();
    					System.out.println("原始图片:"+oldImage);
    					
    					//只会处理在百度编辑器配置好文件夹目录下的图片--可用于防止修改内容时重复处理
    					String charIndex="/temporary";
    					int index=oldImage.indexOf(charIndex);
    					if (index>0) {
    						String srcImage=oldImage.substring(index);
    						String secIndex="\"";
    						String realImagePos=srcImage.substring(0,srcImage.indexOf(secIndex));
    						System.out.println("实际的临时图片的位置: "+realImagePos);
    						
    						String newImagePos=copyFileForUeditor(realImagePos);
    						content = content.replace(realImagePos, newImagePos);
    					}
    				}
    			}
    		}
    	} catch (Exception e) {
    	}
    	return content; //最终经过图片处理后的百度编辑器的内容
    }

        

       copyFileForUeditor方法的代码如下:
    /**
     * 复制百度编辑器内的图片到指定的文件夹下 
     * author: steadyjack
     * date: 2017年6月19日 下午10:16:40
     */
    public static String copyFileForUeditor(String srcPath){
    	String rootPath=FilePath.getSystemRootPath(); //获取系统根路径--可根据自身需要自己写一个
    	String newFolder="";
    	String fileName="";
    	
    	System.out.println("系统根路径: "+rootPath);
    	try {
    		String srcRealPath=rootPath+srcPath;
    		System.out.println("原图所在的路径: "+srcRealPath);
    		
    		File oldFile=new File(srcRealPath);
    		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
    		
    		newFolder="/files/ueditor/"+sdf.format(new Date())+"/"; //自己指定的图片最终移到的目录
    		String newFilePath=rootPath+newFolder;
    		createFold(new File(newFilePath));
    		System.out.println("新的图片所在的路径: "+newFilePath);
    		
    		fileName=oldFile.getName();
    		File newFile=new File(newFilePath+fileName);
    		FileCopyUtils.copy(oldFile, newFile);
    	} catch (Exception e) {
    		e.printStackTrace();
    	}
    	
    	return newFolder+fileName;
    }
    

    其中,FileCopyUtils使用的spring提供的工具类。

    
    
        好了,其实,思路通了,也不复杂。上述的代码我也做了相关注释,如果有相关问题的,可以评论留言,或者加入群进行讨论:

    Java开源技术交流:583522159     鏖战八方群:391619659  我叫debug


    展开全文
  • 移动端图片上传

    千次阅读 2020-05-16 14:24:51
    原版只能上传单张,经过调整修改可以满足于批量张图片上传并附带与php后端交互,记录于下 CSS #fileBox{ padding-left:15px; min-height:0px;overflow:hidden; padding-bottom:20px; padding-top:5px; } #...
  • Bootstrap图片上传并预览(tp5)

    千次阅读 2018-04-04 10:57:13
    Bootstrap多图上传版本1.0(1)异步上传文件并保存到数据库(2)限制文件上传个数(3)监听文件是否上传成功一、控制器//多图上传 public function imgupload() { // 获取表单上传文件 $files = request()-&...
  • 在这篇文章中,我们将看到如何使用NodeJS上传文件或图像到服务器。这里我们将使用Visual Studio和以下NPM包用于我们的开发过程。 express multer body-parser 我们将简要解释这些包的使用。众所周知,NodeJS是一...
  • jQuery 多文件上传

    千次阅读 2018-05-02 15:38:13
    第二篇——控件这一篇将会使用Jquery替代HTML5的上传控件,并增加文件信息展示和上传进度条。首先我们需要下载JqueryUploadify这一个控件包(注2提供下载链接地址),里面包含以下几个引用:&lt;script src=&...
  • 关于vue项目中移动端实现用户选择照片、照片裁剪、一次上传多张图片功能。 最终要实现的效果如下所示: 涉及的功能有 1、图片的选择 2、图片从手机相机选择、拍照 3、图片选择后的裁剪 4、图片在页面的显示...
  • // 选择文件之前的内容。 $placeHolder = $wrap.find( '.placeholder' ), $progress = $statusBar.find( '.progress' ).hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, ...
  • 实现多图压缩 多图上传
  • //表单: //s.php 无标题文档 //函数的封装: //ss.php header('Content-Type:text/html;...//构建上传文件信息 function getFiles(){ $i=0; foreach($_FILES as $fi
  • 多图上传效果 多数据存储 先说多图上传实现 官方提供了多图上传组件 $form->multipleImage($column[, $label]); // 本例中字段是imgurl,所以添加如下代码 $form->multipleImage('imgurl', __('...
  • Android 仿照微信发说说,既能实现拍照,选图库,图案上传 使用Retrofit技术 最近项目做完了,有闲暇时间,一直想做一个类似微信中微信发说说,既能实现拍照,选图库,图案上传的案例,目前好多App都有类似微信...
  • LayUI 多图上传操作实例参考

    万次阅读 热门讨论 2019-03-30 17:27:25
    最近开发新项目的后台,需要上传多张图片的功能,并且使用的是 Layui 前端框架,在整合效果的过程中,也是费了好多时间,在此稍作记录,希望能帮到各位
  • 我是在入口文件中声明的。 defined('__UPLOADURL__') or define('__UPLOADURL__', 'http://tp5-expert.likeball.top'); 前端的页面 <form action="{:url('admin/Indexhome/carousel')}" meth...
  • TP5 实现多图上传

    千次阅读 2018-12-15 17:13:19
    --图片上传--&gt; &lt;link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"&gt; &lt;link href="/public/static/css/...
  • 移动Web开发之HTML5文件上传

    千次阅读 2014-05-06 16:55:27
    iOS在浏览器中限制访问本地文件,并且不支持Flash,所以没有一个比较好的办法在浏览器中进行文件上传。幸运的是iOS 6中放开了上传限制。通过指定HTML5标签的type属性为“file”建立一个文件上传入口,可以访问相册...
  • 问题背景:app在上传图片时,同时传递参数,支持传递个图片。本文中的环境默认已经配好了服务器的CodeIgniter框架。事实上不使用这个框架也是可以的。一,服务器部分1,在controllers下的helpers新建文件upload_...
  • TP5适用bootstrap多图上传插件

    千次阅读 2017-04-11 09:15:01
    bootstrap多图上传插件很多人在tp3.2都用过,但是tp5的用法又有些不同。 使用步骤: 1、 首先要把页面调出来 按照官方demo给出那么多样式,我们根据需要选中其中一个就好 页面怎么调到自己的项中,这里...
  • 在tp5上传图片文件保存到数据库,并且在视图文件内读取图片 一、在前端使用from表单上传图片文件: <form action="{:url('write')}" method="post" enctype="multipart/form-data"> <div class="form-group...
  • tp5简单的图片上传并预览demo

    万次阅读 2017-02-12 10:06:50
    今天没事去研究了一下多图片同时上传,看了很多案例,...这个多图上传的思路是:先添加一个的文件按钮,设置样式opacity=0;z-index=1;覆盖在一个普通按钮上(新手注意哈,这里z-index要设置pozition才有效,这里要将
  • FLASH多文件上传组件

    千次阅读 2012-02-27 23:44:00
    可再次下载需要上传的FLASH文件 页面代码如下:标注为红色的为设置后台接受处理上传的服务端地址,可进行动态的参数传递 String param = request.getParameter("type"); int type =1; if(param!=null && !...
  • Vue的移动端多图上传插件vue-easy-uploader

    万次阅读 热门讨论 2017-11-25 22:57:44
    前言这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发。在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目。就打算自己折腾一下,写一个Vue的上传插件,一劳永逸,以后可以直接...
  • 移动前端图片压缩上传

    千次阅读 2018-07-04 18:12:10
    在做移动端图片上传的时候,传的都是手机本地图片,而本地图片一般都相对比较大,拿现在的智能手机来说,平时拍很图片都是两三兆的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传...
  • 移动端h5图片上传

    千次阅读 2017-09-29 14:18:14
    multiple :表示允许多图上传。 accept:表示允许接收的图片类型,这里设置为image/*标识 jpg,jepg等常见图片类型都允许 &amp;amp;lt;input type=&amp;amp;quot;file&amp;amp;quot; id=&amp;amp;...
  • 3、将下载的文件解压后,将demo文件夹移动到主机目录localhost文件夹下面。 4、打开浏览器输入(http://localhost/demo/demo.html) 5、如果出现如下界面说明成功。6、配置(1)上传图片类型、大小配置。 (2)...
  • 移动端html5多图上传并压缩实现

    万次阅读 热门讨论 2017-02-03 17:42:47
    参考:https://my.oschina.net/swingcoder/blog/682357 ... 简单说明: 关键代码,就是利用html5的canvas重绘图片,指定质量和尺寸达到在前端压缩后再上传的目的。 base64编码,并上传到后台,再转换成
  • 使用html5的multiple="multiple"特性,无插件,使用javascript,jquery和php后台处理,单file标签,多文件上传,带预览,美化CSS即可
  • 思路,异步传输图片并预览,将异步上传...-- 单图上传 --> <div class="layui-form-item"> <label class="layui-form-label"><span class="x-red">*</span>图片上传</label> &l...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 84,319
精华内容 33,727
关键字:

多图上传文件没移动