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

我该怎么做?


当前回答

在React中,如果文件在你的props中,你可以使用:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

其他回答

如果您使用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>
  )
}

我编辑了@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');
    }
}

在React中,如果文件在你的props中,你可以使用:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

https://stackoverflow.com/a/59985954/8784402

ES2017方式

//将文件转换为base64 url常量readURL=文件=>{return new Promise((res,rej)=>{const reader=新文件读取器();reader.onload=e=>res(e.target.result);reader.oneror=e=>rej(e);reader.readAsDataURL(文件);});};//用于演示const fileInput=document.createElement('input');fileInput.type=“文件”;const img=document.createElement('img');img.attributeStyleMap.set(“最大宽度”,“320px”);document.body.appendChild(fileInput);document.body.appendChild(img);常量预览=异步事件=>{const file=event.target.files[0];const-url=等待读取url(文件);img.src=url;};fileInput.addEventListener('change',预览);

单层解决方案:

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