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

我该怎么做?


当前回答

试试这个


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


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

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

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

其他回答

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

单层解决方案:

下面的代码使用对象URL,在查看大型图像时,它比数据URL更有效(数据URL是包含所有文件数据的巨大字符串,而对象URL只是引用内存中文件数据的短字符串):

<img id=“blah”alt=“your image”width=“100”height=“100”/><输入类型=“文件”onchange=“document.getElementById('blah').src=window.URL.createObjectURL(this.files[0])”>

生成的URL如下:

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

使用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>

在使用jQuery/javascript上载之前预览多个图像?

这将一次预览多个文件作为缩略图图像

Html

<input id="ImageMedias" multiple="multiple" name="ImageMedias" type="file"
accept=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input"  value="">                                    
<div id="divImageMediaPreview"></div>

剧本

$("#ImageMedias").change(function () {
    if (typeof (FileReader) != "undefined") {
        var dvPreview = $("#divImageMediaPreview");
        dvPreview.html("");            
        $($(this)[0].files).each(function () {
            var file = $(this);                
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "width: 150px; height:100px; padding: 10px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);                
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

Codepen上的工作演示

jsfiddle上的工作演示

我希望这会有所帮助。

使用纯JavaScript以可重用的方式在单个函数中预览多个文件和单个文件

函数imagePreviewFunc(即,previewerId){let files=that.filepreviewerId.innerHTML=“”//重置图像预览元素for(假设i=0;i<files.length;i++){let imager=document.createElement(“img”);imager.src=URL.createObjectURL(文件[i]);previewerId.append(成像器);}}<input accept=“image/*”type='file'id=“imageInput_1”onchange=“imagePreviewFunc(this,imagePreview_1)”/><div id=“imagePreview_1”>此分区用于单图像预览</div><hr/><input class=“form control”accept=“image/*”type='file'id=“imageInput_2”multiple=“true”onchange=“imagePreviewFunc(this,imagePreview_2)”/><div id=“imagePreview_2”>此div用于多图像预览</div>