在上载图像之前预览图像

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

我该怎么做？

当前回答

用于多图像上传（对@IvanBaev解决方案的修改）

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

希望这对某人有所帮助。

2017-12-16 14:46:40

其他回答

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

试试这个

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

2017-12-21 04:44:51

用于多图像上传（对@IvanBaev解决方案的修改）

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

希望这对某人有所帮助。

2017-12-16 14:46:40

使用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

这是我的代码。支持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=“”/>

2017-03-28 11:28:15

在上载图像之前预览图像

推荐文章

最新文章

标签