在上载图像之前预览图像

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

我该怎么做？

当前回答

使用jquery预览多个文件

$（文档）.ready（函数）{$（'#image'）.change（function（）{$（“#frames”）.html（“”）；对于（var i=0；i<$（this）[0].files.length；i++）{$（“#frames”）.append（'<img src=“'+window.URL.createObjectURL（this.files[i]）+'”width=“100px”height=“100px“/>'）；}});});<head><script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script></head><body><input-type=“file”id=“image”name=“image[]”多个/><br/><div id=“frames”></div></body>

2020-10-18 17:33:35

其他回答

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>

2010-12-16 09:55:11

有几种方法可以做到这一点。最有效的方法是在＜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>

2014-11-27 08:17:06

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

2019-08-14 09:59:48

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

2019-07-23 10:35:49

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

2014-06-05 06:23:19

在上载图像之前预览图像

推荐文章

最新文章

标签