javascript - 将此代码从 FileReader() 更改为 URL.createObjectURL

Question

我在 Stackoverflow 上随处可见这个特定的代码，许多人建议它需要从 FileReader() 转换为 URL.createObjectURL 这样做会使其速度更快，并且链接会更短。但我还没有找到可行的解决方案。 (这是一个图像预览脚本，在上传时显示图像缩略图)。

有人可以帮我转换它吗？

<script>

    $(window).load(function(){

    function readURL() {
        var $input = $(this);
        var $newinput =  $(this).parent().parent().parent().find('.portimg ');
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                reset($newinput.next('.delbtn'), true);
                $newinput.attr('src', e.target.result).show();
                $newinput.after('<div class="delbtn delete_upload"  title="Remove"><span class="bbb-icon bbb-i-remove2"></span></div>');


$("form").on('click', '.delbtn', function (e) {
    reset($(this));

  });
            }
            reader.readAsDataURL(this.files[0]);
        }
    }
    $(".file").change(readURL);


    function reset(elm, prserveFileName) {
        if (elm && elm.length > 0) {
            var $input = elm;
            $input.prev('.portimg').attr('src', '').hide();

            if (!prserveFileName) {
                $($input).parent().parent().parent().find('input.file ').val("");
                //input.fileUpload and input#uploadre both need to empty values for particular div
            }
            elm.remove();
        }
    }

    });

  </script>

Answer 1

如果我理解你的意思是正确的，你可能想要使用 URL.createObjectURL功能如下:

// your url will look like this
// blob:http://example.com/a298356a-ad76-4353-a35f-b6e22a0e792f
var url = URL.createObjectURL(this.files[0]);

完整代码:

function readURL() {
    var $input = $(this);
    var $newinput =  $(this).parent().parent().parent().find('.portimg ');
    if (this.files && this.files[0]) {
        var url = URL.createObjectURL(this.files[0]);

        reset($newinput.next('.delbtn'), true);
        $newinput.attr('src', url).show();
        $newinput.after(`
            <div class="delbtn delete_upload"  title="Remove">
                <span class="bbb-icon bbb-i-remove2"></span>
            </div>
        `);

        $("form").on('click', '.delbtn', function (e) {
            reset($(this));
        });
    }
}