我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
如果您使用React,这里有一个解决方案:
import * as React from 'react'
import { useDropzone } from 'react-dropzone'
function imageDropper() {
const [imageUrl, setImageUrl] = React.useState()
const [imageFile, setImageFile] = React.useState()
const onDrop = React.useCallback(
acceptedFiles => {
const file = acceptedFiles[0]
setImageFile(file)
// convert file to data: url
const reader = new FileReader()
reader.addEventListener('load', () => setImageUrl(String(reader.result)), false)
reader.readAsDataURL(file)
},
[setImageFile, setImageUrl]
)
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
return (
<div>
<div {...getRootProps()}>
{imageFile ? imageFile.name : ''}
{isDragActive ? <p>Drop files here...</p> : <p>Select image file...</p>}
<input {...getInputProps()} />
</div>
{imageUrl && (
<div>
Your image: <img src={imageUrl} />
</div>
)}
</div>
)
}
其他回答
这是我的代码。支持IE[6-9]、chrome 17+、firefox、Opera 11+、Maxthon3
函数previewImage(fileObj,imgPreviewId){var allowExtetion=“.jpg,.bmp,.gif,.png”//允许上载文件类型document.getElementById(“hfAllowPicSuffix”).value;var extention=fileObj.value.substring(fileObj.value.lastIndexOf(“.”)+1).toLowerCase();var browserVersion=window.navigator.userAgent.toUpperCase();如果(allowExtendition.indexOf(extention)>-1){if(fileObj.files){if(window.FileReader){var reader=新文件读取器();reader.onload=函数(e){document.getElementById(imgPreviewId).setAttribute(“src”,e.target.result);};reader.readAsDataURL(fileObj.files[0]);}否则如果(browserVersion.indexOf(“SAFARI”)>-1){警告(“不支持低于broswer的Safari6.0”);}}否则如果(browserVersion.indexOf(“MSIE”)>-1){如果(browserVersion.indexOf(“MSIE 6”)>-1){//ie6document.getElementById(imgPreviewId).setAttribute(“src”,fileObj.value);}其他{//ie[7-9]文件对象选择();fileObj.blur();var newPreview=文档.getElementById(imgPreviewId);newPreview.style.border=“实心1px#eeeeee”;newPreview.style.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='”+document.selection.createRange().text+“')”;newPreview.style.display=“块”;}}否则如果(browserVersion.indexOf(“FIREFOX”)>-1){//FIREFOXvar firefoxVersion=parseFloat(browserVersion.toLowerCase().match(/frefox\/([\d.]+)/)[1]);如果(firefoxVersion<7){//firefox7以下document.getElementById(imgPreviewId).setAttribute(“src”,fileObj.files[0].getAsDataURL());}其他{//firefox7.0+document.getElementById(imgPreviewId).setAttribute(“src”,window.URL.createObjectURL(fileObj.files[0]));}}其他{document.getElementById(imgPreviewId).setAttribute(“src”,fileObj.value);}}其他{警报(“仅支持”+allowExtension+“后缀”);fileObj.value=“”//清除选定文件如果(browserVersion.indexOf(“MSIE”)>-1){文件对象选择();document.selection.clear();}}}函数更改文件(elem){//文件对象,预览img标记id预览图像(elem,'imagePreview')}<input-type=“file”id=“netBarBig”onchange=“changeFile(this)”/><img src=“”id=“imagePreview”style=“width:120px;height:80px;”alt=“”/>
使用纯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>
有几种方法可以做到这一点。最有效的方法是在<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>
试试这个
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”>
我编辑了@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');
}
}