在上载图像之前预览图像

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

我该怎么做？

当前回答

默认Iamge

                @Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" })
                @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" })
                    <img src="~/img/ApHandler.png"  style="height:125px; width:125px" id="DefaultImagePreview"/>
            </div>

 <script>
    var openFile = function (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function () {
            var dataURL = reader.result;
            var output = document.getElementById('DefaultImagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>

2019-07-23 10:35:49

其他回答

使用jquery预览多个文件

$（文档）.ready（函数）{$（'#image'）.change（function（）{$（“#frames”）.html（“”）；对于（var i=0；i<$（this）[0].files.length；i++）{$（“#frames”）.append（'<img src=“'+window.URL.createObjectURL（this.files[i]）+'”width=“100px”height=“100px“/>'）；}});});<head><script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script></head><body><input-type=“file”id=“image”name=“image[]”多个/><br/><div id=“frames”></div></body>

2020-10-18 17:33:35

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

2020-07-26 13:25:32

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）的文件时，这也会处理这种情况

2017-04-10 19:25:18

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>

2010-12-16 09:55:11

试试这个

window.onload=函数（）{if（window.File&&window.FileList&&windows.FileReader）{var filesInput=document.getElementById（“uploadImage”）；filesInput.addEventListener（“更改”，函数（事件）{var files=事件目标文件；var output=document.getElementById（“result”）；对于（var i=0；i<files.length；i++）{var file=文件[i]；if（！file.type.match（'image'））持续var picReader=新文件读取器（）；picReader.addEventListener（“加载”，函数（事件）{var picFile=事件目标；var div=document.createElement（“div”）；div.innerHTML=“<img class='umbnail'src='”+picFile.result+“'”+“title='”+picFile.name+“'/>”；output.insertBefore（div，null）；}); picReader.readAsDataURL（文件）；}});}}<input type=“file”id=“uploadImage”name=“termek_file”class=“file_input”multiple/><div id=“result”class=“uploadPreview”>

2017-12-21 04:44:51

在上载图像之前预览图像

推荐文章

最新文章

标签