用于多图像上传（对@IvanBaev解决方案的修改）

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

希望这对某人有所帮助。

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'，预览）；

在React中，如果文件在你的props中，你可以使用：

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

对于我的应用程序，使用加密的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=“图像预览…”>

我编辑了@Ivan的答案，以显示“无预览可用”图像，如果它不是图像：

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

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

/**
 * @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)

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