dropzone.js - 如何发布动态div id

时间:2014-11-17 13:55:20

标签: javascript php jquery

我尝试使用dropzone.js上传文件。 我的问题是我在一个页面上有四个dropzone上传容器,用于不同的图像。 如何将所选div发布到帖子事件?

<div class='product_thumbs'>
    <form name="product_image_1" action="ajax/upload.php" class="dropzone">
        <div class="product_image image_1" id="image_1">
            <div class="fallback">
                <i class="fa fa-upload"></i>
                <input id="file_1" type="file" multiple />
            </div>
        </div>
        <div class="product_image image_2" id="image_2">
            <div class="fallback">
                <i class="fa fa-upload"></i>
                <input id="file_2" type="file" multiple />
            </div>
        </div>
        <div class="product_image image_3" id="image_3">
            <div class="fallback">
                <i class="fa fa-upload"></i>
                <input id="file_3" type="file" multiple />
            </div>
        </div>
        <div class="product_image image_4" id="image_4">
            <div class="fallback">
                <i class="fa fa-upload"></i>
                <input id="file_4" type="file" multiple />
            </div>
        </div>
    </form>
</div>                  
$(document).ready(function() {
    $(".image_1, .image_2, .image_3, .image_4").dropzone({
        url: "ajax/upload.php?product_id=" + $("#product_id").val() + "&image_number=" + $(this.element).data("id"), // Here I´ll post the id 
        thumbnailWidth: 100,
        thumbnailHeight: 120,
        addRemoveLinks: false,
        previewTemplate: ""+
            "<div class=\"dz-preview dz-file-preview\">"+
            "<div class=\"dz-details\">"+
            //"<div class=\"dz-filename\"><span data-dz-name></span></div>"+
            //"<div class=\"dz-size\" data-dz-size></div>"+
            "<img data-dz-thumbnail />"+
            "</div>"+
            "<div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>"+
            "<div class=\"dz-error-message\"><span data-dz-errormessage></span></div>"+
            "</div>"
    });
});

如何在添加图片后编辑网址?我还将发布所选文件容器的类或ID ...

2 个答案:

答案 0 :(得分:0)

试试这个:

$(this).attr("id")

获取当前div的id

答案 1 :(得分:0)

我不确定你想要实现的目标。

如果您希望简单地发布所有输入文件,请为它们提供相同的名称,例如name="file[]" []表示它是一个数组。