上载图像之前预览图像

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我希望能够在上传文件之前预览文件（图像）。 预览操作应在浏览器中全部执行，而无需使用Ajax上载图像。

我怎样才能做到这一点？

---

#1楼

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

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

我的代码可能不如某些用户好，但我想您会明白的。 在这里你可以看到一个例子

---

#2楼

我已经编辑@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');
    }
}

---

#3楼

是。 有可能的。

HTML

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

您可以从此处获取Live Demo 。

---

#4楼

一线解决方案：

以下代码使用对象URL，它比查看大型图像的数据URL效率要高得多（数据URL是包含所有文件数据的巨大字符串，而对象URL只是在以下位置引用文件数据的短字符串：记忆）：

<img id="blah" alt="your image" width="100" height="100" /> <input type="file" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

生成的URL将类似于：

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

---

#5楼

您可以通过几种方法来执行此操作。 最有效的方法是在<input>中的File上使用URL.createObjectURL（） 。 将此URL传递给img.src，以告知浏览器加载所提供的图像。

这是一个例子：

<input type="file" accept="image/*" onchange="loadFile(event)"> <img id="output"/> <script> var loadFile = function(event) { var output = document.getElementById('output'); output.src = URL.createObjectURL(event.target.files[0]); }; </script>

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

<input type="file" accept="image/*" onchange="loadFile(event)"> <img id="output"/> <script> var loadFile = function(event) { var reader = new FileReader(); reader.onload = function(){ var output = document.getElementById('output'); output.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); }; </script>

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3148927