Question

当我选择图像时，它应该预览图像。但是当我将我的var image_row添加到onchnage时，它不起作用。

我正在尝试使用我的onclick函数<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> ... </android.support.design.widget.CoordinatorLayout>

Codepen示例Here

工作单身ID

function add_popup_image()

不工作

$("#fileupload_extra_image").change(function(){
if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#input-popup-image').attr('src', e.target.result);
    }
    reader.readAsDataURL(this.files[0]);
}
});

问题：如何使$('#fileupload_extra_image' + image_row).change(function(){ if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#input-popup-image' + image_row).attr('src', e.target.result); } reader.readAsDataURL(this.files[0]); } });使用我的图片预览脚本

Answer 1

以下是您的问题：

image_row 过去总是+1，即如果存在的话 input-popup-image1 然后检索到 input-popup-image2 。时间在搜索 id 之前，我只是否定了价值。你刚才需要注意 image_row 的增量，否则下面的代码就可以了。

<强> Pen Here

$('#fileupload_extra_image' + image_row).on('change',function(){
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      var imgrw=image_row-1;
      reader.onload = function (e) {
            $('#input-popup-image' + imgrw).attr('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
});

<强>更新

对于您在评论中提到的问题，我建议您选择以下方法：

Updated Pen

为动态添加的控件classname和image_preview添加browse，然后获取其预览内容，该内容将位于其根父.row内。因此，这将避免使用id获取并跟踪image_row值：

$(document).on('change','.file',function(){
    if (this.files && this.files[0]) {
        var imgpr=$(this).parents('div.row').find('.imgpr')
        var reader = new FileReader();
        reader.onload = function (e) {
            $(imgpr).attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
});

Answer 2

$('#fileupload_extra_image' + image_row).change(function(){
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#input-popup-image' + image_row).attr('src', e.target.result);
            image_row++;
        }
        reader.readAsDataURL(this.files[0]);
    }
});

问题是您在读取器的回调函数实际运行之前更新了image_row。发生的事情是你添加一个事件，监听fileupload_extra_image + image_row以获得一个很好的变更事件。然后，它看起来像你检查文件，你为读者加载了另一个事件监听器。请注意，这实际上并没有运行这行代码：

$('#input-popup-image' + image_row).attr('src', e.target.result);

只是说当读者完成加载时，然后运行它。

然后你的函数继续并更新image_row，这会导致前一行使用值2而不是。

我的修复程序只有在成功加载后才更新image_row。

上传之前的图片预览无法使用+ image + _row

2 个答案: