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

我该怎么做?


当前回答

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',预览);

其他回答

使用JavaScript(jQuery)和HTML5的多个图像示例

JavaScript(jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

标记(HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

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

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)}/>
)}
function assignFilePreviews() {
    $('input[data-previewable=\"true\"]').change(function() {
        var prvCnt = $(this).attr('data-preview-container');
        if (prvCnt) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.error(function() {
                        $(prvCnt).html('');
                    });
                    $(prvCnt).html('');
                    img.appendTo(prvCnt);
                }
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
}
$(document).ready(function() {
    assignFilePreviews();
});

HTML格式

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

当选择了无效类型(例如pdf)的文件时,这也会处理这种情况