我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。

我该怎么做?


当前回答

以下是工作代码。

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Java脚本:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

其他回答

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

以下是工作代码。

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Java脚本:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

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

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

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

有几种方法可以做到这一点。最有效的方法是在<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>

试试这个


在将图像从浏览器上传到服务器之前预览图像,而不使用Ajax或任何复杂的功能。


它需要一个“onChange”事件来加载图像。

函数预览(){frame.src=URL.createObjectURL(event.target.files[0]);}<表单><input-type=“file”onchange=“preview()”><img id=“frame”src=“”width=“100px”height=“100px“/></form>

要预览多个图像,请单击此处