Question

在我的主代码中有一个图标，当我点击它时会触发我的输入类型文件。我上传了一张图片，我在 img 标签中看到了这张图片。我只想更改该输入一次，因此在上传第一张图片后我无法更改它，并且我不希望该文件资源管理器再次打开。我在 https://jsfiddle.net/1rchq2se/11/ 中创建了一个几乎相同的辅助代码。我有 html 代码

<div class="wrapper">
  <input type="file">
  <p>File name: <span class="file-name"></span></p>
</div>

我有 2 次尝试在第一次更改后停止活动

/* first */
$('.wrapper').one("change", "input[type='file']", function(){
    $('.file-name').text($(this).val())
  $('.wrapper').off("change", "input[type='file']")
})
/* second */
var stopChange = false;
  if(stopChange == false){
  $('.wrapper').one("change", "input[type='file']", function(){
    $('.file-name').text($(this).val())
    stopChange = true;
  })
}

我的文件名不再更改，但我仍然可以打开该文件资源管理器有什么方法可以阻止吗？在我的主代码中，我有一个函数，当调用该 img 时会更改 src，但总的来说与此处几乎相同

Answer 1

这是我的主要代码

<div class="attachments-form-wrapper">
    <div class="bbp-attachments-form">
        <div class="attachment-wrapper">
            <input type="file" size="40" name="d4p_attachment[]">
            <div class="attachment-upload-button">
                <img class="preview-attachment no-src" src="//:0" />
                <div class="attachment-upload-button-placeholder">
                    <svg class="svg-icon icon-add-image">
                        <use xlink:href="#icon-add-image"></use>
                    </svg>
                    <div>Add image</div>
                </div>
            </div>
        </div>
    </div>
</div>

jquery是这样的

var new_attachment = $('.attachment-wrapper').prop('outerHTML');

$(".attachments-form-wrapper").on('click', '.attachment-upload-button', function() {
    $(this).siblings('input').click();
});

function readImageURL(input) {
    if (input[0].files && input[0].files[0]) {
        for(var i=0,file; file=input[0].files[i]; i++) {
            var reader = new FileReader();
            reader.onload = function(e) {
                input.closest('.attachment-wrapper').find('.preview-attachment').attr('src', e.target.result).show().siblings().hide();
            }
            reader.readAsDataURL(input[0].files[i]); 
        }
        if($('.attachment-wrapper').length + 1 <= gdbbPressAttachmentsInit.max_files) {
            $('.attachment-wrapper').last().after(new_attachment);
        }
    } else {
        input.closest('.attachment-wrapper').find('.preview-attachment').hide().siblings().show();
    }
}

$(".attachments-form-wrapper").on('change', 'input[type=file]', function() {
    readImageURL($(this));
});

上传第一个文件后停止更改事件

1 个答案: