将类别标记为我上传的多张图片

时间:2015-11-22 11:22:50

标签: javascript php jquery mysql

我正在提交一个包含多个文件上传的表单,我想要的只是    根据他们的类别区分上传的图像    上传

<form action="upload.php" method="POST">
<table>
  <tr>
     <td>
        <select name="category[]" >
           <option value="13">Food</option>
           <option value="15">Medicine</option>
        </select>
     </td>
     <td>
        <input type="file" multiple name="product_image[]">
     </td>
  </tr>
  <tr>
     <td>
        <select name="category[]" >
           <option value="13">Food</option>
           <option value="15">Medicine</option>
        </select>
     </td>
     <td>
        <input type="file" multiple name="product_image[]">
     </td>
  </tr>
  <tr>
     <td>
        <input type="submit" value="submit">
     </td>
  </tr>

</table>
</form>

选择类别为&#34;食物&#34;并上传一张名为&#34; food.jpg&#34;在第一排。    选择类别为&#34;药物&#34;并上传两张名为&#34; medicine1.jpg和medicine2.jpg&#34;在第二排和    在提交我的结果时

Array(
      [category] => Array
           (
            [0] => 13
            [1] => 15
           )
      [product_image] => Array
           (
            [0] => food.jpg
            [1] => medicine1.jpg
            [2] => medicine2.jpg
           )
)

但我想根据类别值标记图像。就像我想要的那样

[product_image] => Array
           (
            [13] => food.jpg
            [15] => medicine1.jpg
            [15] => medicine2.jpg
           )

2 个答案:

答案 0 :(得分:0)

if (!is_dir($dir)) {
        mkdir($dir);  
else 

    //upload image  


    }

Create directory

使用上面的代码和教程创建目录,当你有图像并且只是保存到db。然后将该图像上传到指定的目录路径。

答案 1 :(得分:0)

一种可能的解决方案是在提交包含所选类别ID和文件名的连接值的表单时创建隐藏输入字段。 格式可能如下所示:

  

&#39; id_selected_category ##的文件名&#39;

然后您可以使用此分隔符(在本例中为##)从$ _POST数组中检索服务器上的类别和文件名,这样您就知道为该图像选择了哪个类别。

此示例中隐藏输入字段的名称为:

  

&#39; category_file&#39;

您的$_POST数组看起来像这样:

array(3) {
  ["category"]=>
  array(2) {
    [0]=>
    string(2) "13"
    [1]=>
    string(2) "13"
  }
  ["product_image"]=>
  array(3) {
    [0]=>
    string(5) "1.jpg"
    [1]=>
    string(5) "2.jpg"
    [2]=>
    string(5) "3.jpg"
  }
  ["category_file"]=>
  array(3) {
    [0]=>
    string(9) "13##1.jpg"
    [1]=>
    string(9) "13##2.jpg"
    [2]=>
    string(9) "13##3.jpg"
  }
}

例如:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['category_file'])) {
        $categoryFiles = $_POST['category_file'];

        foreach($categoryFiles as $categoryFile) {
            $categoryAndFile = array_filter(explode("##", $categoryFile));

            if (count($categoryAndFile) == 2) {
                // Here you can differentiate the uploaded images according to the category which they were uploaded
                $category = $categoryAndFile[0];
                $file = $categoryAndFile[1];
            }
        }
    }
}
?>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#theForm").submit(function() {
                var categories = $('select[name=category\\[\\]]');

                $(categories).each(function() {
                    var category = this;
                    var imageNames = $(this).parent().next().children('input[type="file"]').prop("files");

                    $(imageNames).each(function(){

                        // Concatenate the selected category with the name of the image
                        var categoryFileName = $(category).val() + '##' + this.name;

                        // Add the hidden input field
                        $('<input>').attr({
                            type: 'hidden',
                            name: 'category_file[]',
                            value: categoryFileName
                        }).appendTo("#theForm");
                    });
                });
            });
        });
    </script>
</head>
<body>
<form id="theForm" action="upload.php" method="POST">
    <table>
        <tr>
            <td>
                <select name="category[]" >
                    <option value="13">Food</option>
                    <option value="15">Medicine</option>
                </select>
            </td>
            <td>
                <input type="file" multiple name="product_image[]">
            </td>
        </tr>
        <tr>
            <td>
                <select name="category[]" >
                    <option value="13">Food</option>
                    <option value="15">Medicine</option>
                </select>
            </td>
            <td>
                <input type="file" multiple name="product_image[]">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="submit">
            </td>
        </tr>

    </table>
</form>
</body>
</html>