Question

点击 div 上的任意位置即可触发输入

2017-05-31

5491

javascript jquery uploadcare

我试图做到这一点，当您单击特定的 div 时，它会触发一个输入按钮来打开 uploadcare 小部件。

这是有问题的 HTML

<div class="col-md-6 image-preview-single">
<img src="" alt="" class="img-responsive card-shadow hidden">
    <div id="logo-upload" class="add-new-short add-new-home-realtor card-shadow-mini btn-file uploader-homicity" style="display:block;text-decoration:none; cursor: pointer;">
        <i class="fa fa-photo"/>
        <input type="hidden" role="uploadcare-uploader" name="logo" data-upload-url-base="" data-images-only="true" data-crop="150x150" data-clearable="true" id="logo-input">
            <div class="uploadcare-widget uploadcare-widget-option-clearable uploadcare-widget-status-ready" data-status="ready">
                <div class="uploadcare-widget-dragndrop-area">
                    Drop a file here
                </div>
                <div class="uploadcare-widget-status uploadcare-widget-circle uploadcare-widget-circle--canvas">
                    <canvas width="56" height="56"/>
                </div>
                <div class="uploadcare-widget-text">
                </div>
                <div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-open">Choose an image</div>
                <div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-cancel">Cancel</div>
                <div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-remove">Remove</div>
            </div> 
    </div>

以及有问题的 Jquery

$( '#logo-upload' ).on( 'click', function() {
    $('input#logo-input').click();
});

这是控制台错误

Uncaught RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)
    at n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at HTMLDivElement.<anonymous> (uploadcare.js:72)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:4)
    at HTMLInputElement.<anonymous> (jquery.min.js:4)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)

我遗漏了什么？

谢谢

Answer 1

您还需要在输入点击时添加此事件：

$('input#logo-input').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    ...your code
});

您需要停止传播，因为您创建了无限循环。当您触发输入点击时，此输入位于 logo-upload div 内，并且输入点击会传播到此容器，从而创建无限循环。

Answer 2

两种选择：

使用 <label> 激活仅包含 html 的输入：

<label for="yourId">点击此处<label> <input id="yourId" type="text" />
使用 focus() 代替 click() 以及 stopPropagation() 和 stopPropagation() ：

$('#logo-upload' ).on( 'click', function(e) { e.preventDefault(); e.stopPropagation(); $('input#logo-input').focus(); });

Answer 3

好的，

所以您想打开 Uploadcare 对话框 ，而不是 小部件 。

首先，从您的页面中删除所有小部件的 HTML 代码，它由库添加，应该在提供的文档中。其次，使用以下代码

$('#logo-upload').on('click', function() {
    uploadcare.Widget(input_selector).openDialog();
});