无法在引导模块窗口中读取未定义输入文件的属性“0”

Posted 2023-02-25

【中文标题】无法在引导模块窗口中读取未定义输入文件的属性“0”

【英文标题】：Cannot read property '0' of undefined input file in bootstrap module window

【发布时间】：2015-10-29 00:45:11

【问题描述】：

我正在尝试在 Bootstrap 模式中创建一个表单。它应该包含输入文件字段并预览所选图像，因此我可以使用 Jcrop 裁剪图像。

这就是我现在正在做的事情：

<script type="text/javascript">
    $('#new-menu').on('shown.bs.modal', function (event) 
        var modal = $(this);

        var src = modal.find(".modal-body .upload");
        var target = modal.find(".image");

        src.bind("change", function () 
            // fill fr with image data
            modal.find(".jcrop-holder").remove();
            readUrl(modal,target,src);
            initJcrop(target);
        );
    );

    function readUrl(modal,target,src)
        if (src.files && src.files[0]) 
            var reader = new FileReader();
            reader.onload = function (e) 
                target.attr('src', e.target.result);
            ;
            reader.readAsDataURL(input.files[0]);
            initJcrop(target, modal);
        
        else alert(src.files[0]);
    
    


    function showCoords(c) 
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    

    function initJcrop(img) 
        jcrop_api = $.Jcrop(img);

        jQuery(img).Jcrop(
            aspectRatio: 16 / 9,
            onChange: showCoords,
            setSelect: [0, 90, 160, 0],
            onSelect: showCoords
        , function () 
            modal.find(".jcrop-holder").css(
                left: "50%",
                marginLeft: -img.width / 2 + "px"
            );
        );
    
</script>

但我得到了这个错误

'无法读取未定义的属性'0'

html

<form action="place/id/new/service/">
   <div class="input-group">
       <img src="http://placehold.it/160x90" class="image"/>
   </div>
   <div class="input-group">
       <span class="input-group-addon" id="basic-addon1">
          <i class="glyphicon glyphicon-apple"></i>
      </span>
       <input type="text" id="form-name" class="form-control"
              placeholder="Назва" value="" aria-describedby="basic-addon1"/>
   </div>
   <div class="input-group">
       <span class="input-group-addon" id="basic-addon2">
          <i class="fa fa-tag"></i>
      </span>
       <input type="number" id="form-price" class="form-control"
              placeholder="Ціна" value="" aria-describedby="basic-addon1"/>
       <span style="padding:2px 5px" class="input-group-addon"><i>.грн</i></span>
   </div>
   <div class="input-group">
       <textarea class="form-control place_description" style="resize: none" rows="5"
                 placeholder="Короткий опис послуги"></textarea>
   </div>
   <div style="text-align: center">
       <small class="description-info">Залишилося 160 символів</small>
   </div>
   <div class="input-group">
       <input type="file" class="upload"/>
   </div>
   <button id="new-service" class="btn btn-primary" type="submit">Зареєструвати</button>
</form>

【参考方案1】：

您传入的src function readUrl(modal,target,src) 是一个jQuery 元素，当您需要访问DOM 元素时。有

src.get(0).files && src.get(0).files

代替

src.files && src.files[0]

【讨论】：

我忘了提，错误在线code(reader.readAsDataURL(src.get(0).files));我有一个链接的jQuery源，所以它必须双向工作，我试图按照您的建议进行操作，但出现错误code（无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型。）

是的，有效。 （我上次忘记添加数组指针 [0]），谢谢 =) 但它接缝我还有一些错误要捕获。