创建一个加载文件并触发自定义事件的函数怎么样。然后将侦听器附加到输入。这样，我们可以更灵活地使用文件，而不仅仅是预览图像。

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

也许我的代码不如一些用户，但我想你会明白这一点的

这个解决方案怎么样？

只需将数据属性“data type=editable”添加到图像标记中，如下所示：

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

还有你项目的脚本。。。

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// https://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

见JSFiddle演示

https://stackoverflow.com/a/59985954/8784402

ES2017方式

//将文件转换为base64 url常量readURL=文件=>{return new Promise（（res，rej）=>{const reader=新文件读取器（）；reader.onload=e=>res（e.target.result）；reader.oneror=e=>rej（e）；reader.readAsDataURL（文件）；});};//用于演示const fileInput=document.createElement（'input'）；fileInput.type=“文件”；const img=document.createElement（'img'）；img.attributeStyleMap.set（“最大宽度”，“320px”）；document.body.appendChild（fileInput）；document.body.appendChild（img）；常量预览=异步事件=>{const file=event.target.files[0]；const-url=等待读取url（文件）；img.src=url；};fileInput.addEventListener（'change'，预览）；

对于我的应用程序，使用加密的GET url参数，只有这一点有效。我总是得到一个TypeError：$（…）为空。摘自https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

函数previewFile（）{var preview=document.querySelector（'img'）；var file=document.querySelector（'input[type=file]'）.files[0]；var reader=新文件读取器（）；reader.addEventListener（“load”，函数（）{preview.src=读取结果；}，假）；if（文件）{reader.readAsDataURL（文件）；}}<input-type=“file”onchange=“previewFile（）”><br><img src=“”height=“200”alt=“图像预览…”>

imgInp.oncange=evt=>{const[file]=imgInp.fileif（文件）{blah.src=URL.createObjectURL（文件）}}<form runat=“server”><input accept=“image/*”type='file'id=“imgInp”/><img id=“blah”src=“#”alt=“your image”/></form>

有几种方法可以做到这一点。最有效的方法是在＜input＞的文件上使用URL.createObjectURL（）。将此URL传递给img.src，告诉浏览器加载提供的图像。

下面是一个示例：

<input-type=“file”accept=“image/*”onchange=“loadFile（event）”><img id=“output”/><脚本>var loadFile=函数（事件）{var output=document.getElementById（'output'）；output.src=URL.createObjectURL（event.target.files[0]）；output.onload=函数（）{URL.revokeObjectURL（output.src）//释放内存}};</script>

您还可以使用FileReader.readAsDataURL（）从＜input＞解析文件。这将在内存中创建一个字符串，其中包含图像的base64表示。

<input-type=“file”accept=“image/*”onchange=“loadFile（event）”><img id=“output”/><脚本>var loadFile=函数（事件）{var reader=新文件读取器（）；reader.onload=函数（）{var output=document.getElementById（'output'）；output.src=读取结果；};reader.readAsDataURL（event.target.files[0]）；};</script>