Question

我的HTML是： -

<div class="mb10">
    <input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
</div>

我正在使用FileInput JS库，初始化file输入类型会为其添加更多HTML。

JQuery的

$("#input-upload-img1").fileinput();

初始化后，它会添加几个HTML。

<div class="mb10">
    <span class="file-input file-input-new">
        <div class="file-preview "> <!-- This whole div is initially hidden, ie display:none-->
            <div class="close fileinput-remove text-right">×</div>
            <div class="file-preview-thumbnails"></div>
            <div class="clearfix"></div>
            <div class="file-preview-status text-center text-success"></div>
            <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
        </div>
        <div class="input-group ">
            <div class="form-control file-caption kv-fileinput-caption" tabindex="-1">
                <div class="file-caption-name" style="width: 322.42px;"></div>
            </div>
            <div class="input-group-btn">
                <button class="btn btn-default fileinput-remove fileinput-remove-button" type="button"><!-- This button is initially hidden, ie display:none-->
                <i class="glyphicon glyphicon-ban-circle"></i>
                Remove
                </button>
                <div class="btn btn-primary btn-file">
                    <i class="glyphicon glyphicon-folder-open"></i>
                    Browse …
                    <input id="input-upload-img1" class="file" type="file" accept="image/*,video/*" name="img1" data-preview-file-type="text">
                </div>
            </div>
        </div>
    </span>
</div>

选择图像后，我得到以下HTML： -

    <div class="mb10">
        <span class="file-input">
            <div class="file-preview">
                <div class="close fileinput-remove text-right">×</div>
                <div class="file-preview-thumbnails">
                    <div id="preview-1469278203925-0" class="file-preview-frame">
<!--Check added image.-->
                        <img class="file-preview-image" style="width:auto;height:160px;" alt="IMG_20160606_210238.jpg" title="IMG_20160606_210238.jpg" src="blob:http://127.0.0.1:8000/27307c69-0599-4622-93f1-bf8ae6cc0e5c"> 
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="file-preview-status text-center text-success"></div>
                <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
            </div>
            <div class="input-group ">
                <div class="form-control file-caption kv-fileinput-caption" tabindex="-1">
                    <div class="file-caption-name" style="width: 234.22px;" title="IMG_20160606_210238.jpg"></div>
                    <div class="input-group-btn">
                        <button class="btn btn-default fileinput-remove fileinput-remove-button" type="button">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        Remove
                        </button>
                        <div class="btn btn-primary btn-file">
                            <i class="glyphicon glyphicon-folder-open"></i>
                            Browse …
                            <input id="input-upload-img1" class="file" type="file" accept="image/*,video/*" name="img1" data-preview-file-type="text">
                        </div>
                    </div>
                </div>
        </span>
    </div>

请注意添加的img代码。

现在，我正在编写一个JQuery，以便在选择文件时获取src标记的img。我该怎么办？

这是我的jQuery： -

$('.file').change(function(){
    var file = this.files[0];
    if (!file){
        return
    }

    var source_image = $(this).closest('div .file-preview-frame').find('.file-preview-image')
    alert(source_image.attr('src'))
}

返回未定义。我猜它是因为动态添加图像。如何获取所选文件的图像源。??

Answer 1

我认为您错误地理解了 .closest 的用法。它读取，对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。您会看到，当.file元素发生更改时，它会遍历其祖先，其中span.file-input将是其中一个祖先，而div.file-preview-frame则不是。span.file-input。因此，您应该访问div.file-preview-frame，然后找到$('.file').change(function(){ var file = this.files[0]; if (!file){ return } var source_image = $(this).closest('span.file-input') .find('div.file-preview-frame .file-preview-image') alert(source_image.attr('src')) }。

你应该这样做。

plugin

<击>

<强>更新

我接着检查了file，发现了几个你可以真正使用的事件：


<强> fileLoaded ：

在预览中加载文件后会触发此事件。   其他可用参数包括：


previewId ：文件对象实例

index ：预览文件容器的标识符

reader ：预览列表中已加载文件的从零开始的顺序索引

$('#input-id').on('fileloaded', function(event, file, previewId, index, reader) { console.log("fileloaded"); }); ：FileReader实例（如果有）。


示例：

$('#input-id').on('fileselect', function(event, numFiles, label) { console.log("fileselect"); });


<强> fileSelect

在文件输入中选择文件后触发此事件   文件浏览按钮。这与变化略有不同   在某种意义上，即使文件浏览也会触发此事件   对话框已取消。

示例：

fileLoaded

我希望您可以使用$('.file').on('fileloaded', function(event, file, previewId, index, reader) { console.log(file); //file will have many details like lastModified, name, size, type etc., });事件，如下所示：

$('#cropbox').Jcrop({ boxWidth: 280, //Maximum width you want for your bigger images boxHeight: 280, //Maximum Height for your bigger images ... });

获取最接近div的img src

1 个答案: