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

我该怎么做?


当前回答

短双衬套

这是cmlevy答案的大小改进-尝试

<input-type=file oninput=“pic.src=window.URL.createObjectURL(this.files[0])”><img id=“pic”/>

其他回答

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>

在使用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上的工作演示

我希望这会有所帮助。

干净简单J小提琴

当您希望通过div或按钮间接触发事件时,这将非常有用。

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

试试这个

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”>

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