我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
在使用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上的工作演示
我希望这会有所帮助。
其他回答
这是我的代码。支持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=“”/>
如果您使用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>
)
}
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>
在React中,如果文件在你的props中,你可以使用:
{props.value instanceof File && (
<img src={URL.createObjectURL(props.value)}/>
)}
短双衬套
这是cmlevy答案的大小改进-尝试
<input-type=file oninput=“pic.src=window.URL.createObjectURL(this.files[0])”><img id=“pic”/>