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

我该怎么做?


当前回答

单层解决方案:

下面的代码使用对象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

其他回答

默认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>

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>

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

<img id="blah" alt="your image" width="100" height="100" />
<input type="file" name="photo" id="fileinput" />
<script>
$('#fileinput').change(function() {
var url = window.URL.createObjectURL(this.files[0]);
 $('#blah').attr('src',url);
});
</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>

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