Предварительный просмотр изображения перед его загрузкой

Question

Предварительный просмотр изображения перед его загрузкой

Элегантное решение, так как JAVA 8:

LinkedList<String>list = new LinkedList<String>();
list.add("abc");
list.add("Bcd");
list.add("aAb");

list.sort(String::compareToIgnoreCase);

Другой вариант - использовать лямбда-выражения:

list.sort((o1, o2) -> o1.compareToIgnoreCase(o2));

1395

file-upload javascript jquery

задан Justin 6 September 2011 в 10:49

3 ответа

Другие вопросы по тегам:

file-upload javascript jquery

Похожие вопросы:

score 0 · Answer 1

В Реагируют, если файл находится в Ваших опорах, можно использовать:

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

0

ответ дан Melle 4 October 2019 в 07:36

1

О, @trustin является автором и MINA и Netty. – Jason Heo 7 February 2014 в 15:59

score 0 · Answer 2

повторные изображения Предварительного просмотра, прежде чем это будет загружено с помощью jQuery/javascript?

Это предварительно просмотрит несколько файлов как изображения миниатюр за один раз

сценарий

$("#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.");
    }
});

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>

Рабочая Демонстрация на Codepen

Рабочая Демонстрация на jsfiddle

, я надеюсь, что это поможет.

score 0 · Answer 3

Вот решение, если Вы используете, Реагируйте:

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>
  )
}