de-vraag
  • 質問
  • タグ
  • ユーザー
通知:
報酬:
登録
登録すると、質問に対する返答やコメントが通知されます。
ログイン
すでにアカウントをお持ちの方は、ログインして新しい通知を確認してください。
追加された質問、回答、コメントには報酬があります。
さらに
ソース
編集
 Simbian
Simbian
質問

アップロード前に画像をプレビューする

ファイル(画像)をアップロードする前にプレビューできるようにしたい。 画像をアップロードするためにAjaxを使用せずに、プレビューアクションはすべてブラウザ内で実行される必要があります。

どうすればいいのでしょうか?

1466 2010-12-16T09:51:32+00:00 20
 Justin
Justin
編集された質問 6日 9月 2011 в 10:49
プログラミング
file-upload
javascript
jquery
人気動画
画像をアップロード&プレビューしよう【わかりすぎて怖いJavaScript入門】
画像をアップロード&プレビューしよう【わかりすぎて怖いJavaScript入門】
2年前
Cloud Storageに画像をアップ&プレビュー&削除【日本一わかりやすいReact-Redux講座 実践編#5】
Cloud Storageに画像をアップ&プレビュー&削除【日本一わかりやすいReact-Redux講座 実践編#5】
1年前
【JavaScript】FileAPI「画像サイズ取得・画像プレビュー」【基本編】(サンプルコードあり)プログラミング入門
【JavaScript】FileAPI「画像サイズ取得・画像プレビュー」【基本編】(サンプルコードあり)プログラミング入門
1年前
【PHP初級】画像アップロードの仕組みとDB作成 ~画像アップロード機能を作る~ #01
【PHP初級】画像アップロードの仕組みとDB作成 ~画像アップロード機能を作る~ #01
1年前
【2021年9月最新】Firebaseに画像をアップロードして表示しよう
【2021年9月最新】Firebaseに画像をアップロードして表示しよう
8ヶ月前
【初心者】YouTubeに動画をアップロードする方法
【初心者】YouTubeに動画をアップロードする方法
2年前
Previewing Image Before File Upload On Websites - HTML, CSS & JavaScript Tutorial
Previewing Image Before File Upload On Websites - HTML, CSS & JavaScript Tutorial
2年前
S3_01-01_Upload File ja
S3_01-01_Upload File ja
2年前
【BIGLOBEモバイル】本人確認書類のアップロードについて
【BIGLOBEモバイル】本人確認書類のアップロードについて
1年前
【ユーチューブ】スマホからサムネイルを設定する方法
【ユーチューブ】スマホからサムネイルを設定する方法
5年前
いいサムネイルの作り方【YouTuberになろう!ユーチューバー講座#9】
いいサムネイルの作り方【YouTuberになろう!ユーチューバー講座#9】
2年前
【PHP初級】画像ファイルの取得とバリデーション ~画像アップロード機能を作る~ #02
【PHP初級】画像ファイルの取得とバリデーション ~画像アップロード機能を作る~ #02
1年前
【iPhoneのファイル】書類をスキャンしてPDFにする方法
【iPhoneのファイル】書類をスキャンしてPDFにする方法
1年前
【初心者必見!】デザイナーが教える | VLLO ブロ の使い方~超入門~【iPhone/iPad動画編集アプリ】
【初心者必見!】デザイナーが教える | VLLO ブロ の使い方~超入門~【iPhone/iPad動画編集アプリ】
1年前
Finderの画像をプレビューで切り抜き、サムネイル作成までやったよ。
Finderの画像をプレビューで切り抜き、サムネイル作成までやったよ。
11ヶ月前
« 前へ
次へ »
この質問には 1 つの答え があり、読むには ログイン してください。
解決策・回答
Ivan Baev
Ivan Baev
16日 12月 2010 в 9:55
2010-12-16T09:55:11+00:00
さらに
ソース
編集
#11525381

以下のサンプルコードをご覧ください。

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

また、【こちらのサンプルをお試しください】(

)。

 dgknca
dgknca
編集した答え 7日 6月 2019 в 10:57
2363
0
 nkron
nkron
27日 11月 2014 в 8:17
2014-11-27T08:17:06+00:00
さらに
ソース
編集
#11525387

これを行うには、いくつかの方法があります。 最も効率的な方法は、& lt; input& gt;のファイルでURL.createObjectURL()を使用することです。 このURLをimg.srcに渡して、ブラウザに提供された画像をロードするように指示します。

次に例を示します。

<。!-スニペットを開始:js hide:false -->。

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

<。!-終了スニペット-->。

FileReader.readAsDataURL()を使用して、& lt; input& gt;からファイルを解析することもできます。 これにより、画像のbase64表現を含む文字列がメモリに作成されます。

<。!-スニペットを開始:js hide:false -->。

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

<。!-終了スニペット-->。

308
0
 cnlevy
cnlevy
18日 11月 2014 в 8:00
2014-11-18T20:00:29+00:00
さらに
ソース
編集
#11525386

ワンライナーソリューション:

次のコードは、大きな画像を表示するためにデータURLよりもはるかに効率的なオブジェクトURLを使用します(データURLはすべてのファイルデータを含む巨大な文字列ですが、オブジェクトURLは、ファイルデータをインで参照する短い文字列です。メモリ):

<。!-スニペットを開始:js hide:false -->。

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

<。!-終了スニペット-->。

生成されたURLは次のようになります。

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345
 cnlevy
cnlevy
編集した答え 7日 6月 2018 в 1:21
189
0
Dmitri Dmitri
Dmitri Dmitri
24日 12月 2011 в 11:58
2011-12-24T11:58:15+00:00
さらに
ソース
編集
#11525382

LeassTaTTの回答は、FFやChromeのような標準的なブラウザでうまく機能します。 IE用の解決策は存在しますが、見た目が異なります。クロスブラウザー対応については、こちらをご覧ください。

HTMLでは2つのプレビュー要素が必要で、標準ブラウザではimg、IEではdivです。

HTMLを使用します。

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

<div id="preview_ie"></div>

CSSでは、以下のようなIE特有のことを指定しています。

CSSを使用します。

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}  

HTMLでは、標準のJavascriptとIE専用のJavascriptを同梱しています。

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

<![endif]-->

pic_preview.jsはLeassTaTT'さんの回答にあるJavascriptです。('#blah') を $('#preview') に置き換え、 $('#preview').show() を追加してください。

今度はIE専用のJavascript(pic_preview_ie.js)です。

function readURL (imgFile) {    
  var newPreview = document.getElementById('preview_ie');
  newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
  newPreview.style.width = '160px';
  newPreview.style.height = '120px';
}    

以上です。IE7、IE8、FF、Chromeで動作します。IE9でテストして報告してください。 IEプレビューの考え方は、こちらにありました。 http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

How to Preview image before Upload
forums.asp.net
45
0
Sachin Prasad
Sachin Prasad
5日 6月 2014 в 6:23
2014-06-05T06:23:19+00:00
さらに
ソース
編集
#11525384

画像でない場合は、@ 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');
    }
}
23
0
Nino Škopac
Nino Škopac
14日 12月 2015 в 3:30
2015-12-14T15:30:49+00:00
さらに
ソース
編集
#11525392

Ivan Baevの回答に基づいた複数のファイルバージョンを次に示します。

HTML 。

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

JavaScript / jQuery 。

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

$ .parseHTMLを使用しているため、jQuery 1.8が必要です。これは、XSSの軽減に役立ちます。

これはすぐに機能し、必要なのはjQueryだけです。

18
0
Md. Rahman
Md. Rahman
25日 7月 2014 в 11:20
2014-07-25T11:20:46+00:00
さらに
ソース
編集
#11525385

はい。 可能です。

Html。

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS。

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

ここからライブデモを取得できます。

15
0
Sivashanmugam Kannan
Sivashanmugam Kannan
30日 11月 2016 в 5:57
2016-11-30T05:57:23+00:00
さらに
ソース
編集
#11525394

清潔でシンプル。 JSfiddle 。

これは、divまたはボタンから間接的にイベントをトリガーする場合に役立ちます。

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>

<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>
Sivashanmugam Kannan
Sivashanmugam Kannan
編集した答え 13日 12月 2017 в 1:39
10
0
Ratan Paul
Ratan Paul
26日 11月 2015 в 6:33
2015-11-26T06:33:53+00:00
さらに
ソース
編集
#11525391

JavaScript(jQuery)とHTML5を使用した複数の画像の例。

JavaScript(jQuery)。

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

マークアップ(HTML)。

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>
 AdamMcquiff
AdamMcquiff
編集した答え 2日 5月 2017 в 12:59
7
0
Muhammad Awais
Muhammad Awais
29日 7月 2016 в 6:41
2016-07-29T18:41:57+00:00
さらに
ソース
編集
#11525393

以下は作業コードです。

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:。

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
5
0
 ajorquera
ajorquera
21日 3月 2014 в 1:16
2014-03-21T13:16:13+00:00
さらに
ソース
編集
#11525383

ファイルをロードし、カスタムイベントを発生させる関数を作成するのはどうでしょうか。そして、入力にリスナーをアタッチします。こうすれば、画像をプレビューするためだけでなく、より柔軟にファイルを利用することができる。

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

おそらく、私のコードは他のユーザーほど良くはないでしょうが、要点はご理解いただけると思います。ここで、例を見ることができます。

Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
5
0
Nisal Edu
Nisal Edu
21日 12月 2017 в 4:44
2017-12-21T04:44:51+00:00
さらに
ソース
編集
#11525399

これを試してみてください。

<。!-スニペットを開始:js hide:false console:true babel:false -->。

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}
<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">

<。!-終了スニペット-->。

2
0
Rodolpho Brock
Rodolpho Brock
6日 1月 2015 в 4:19
2015-01-06T16:19:57+00:00
さらに
ソース
編集
#11525389

このソリューションはどうですか?

次のような画像タグにデータ属性「data-type = editable」を追加するだけです。

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

そして、プロジェクトへのスクリプトはコースから外れます。..

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// https://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

JSFiddleのデモを参照。

2
0
 Andrew
Andrew
27日 7月 2015 в 6:01
2015-07-27T06:01:14+00:00
さらに
ソース
編集
#11525390

インターネットのおかげでIE 7+でプレビュー効果を生成できるプラグインを作成しましたが、制限はほとんどありません。 github pageに入れて、入手しやすくしました。

<。!-スニペットを開始:js hide:false -->。

$(function () {
        $("input[name=file1]").previewimage({
            div: ".preview",
            imgwidth: 180,
            imgheight: 120
        });
        $("input[name=file2]").previewimage({
            div: ".preview2",
            imgwidth: 90,
            imgheight: 90
        });
    });
.preview > div {
  display: inline-block;
  text-align:center;
}

.preview2 > div {
  display: inline-block; 
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
    Preview
    <div class="preview"></div>
    Preview2
    <div class="preview2"></div>

    <form action="#" method="POST" enctype="multipart/form-data">
        <input type="file" name="file1">
        <input type="file" name="file2">
        <input type="submit">
    </form>

<。!-終了スニペット-->。

1
0
Keyur K
Keyur K
16日 12月 2017 в 2:46
2017-12-16T14:46:40+00:00
さらに
ソース
編集
#11525398

複数の画像のアップロード(@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]);
        }
    }
}

。

これが誰かを助けることを願っています。

1
0
 SHUBHASIS
SHUBHASIS
23日 7月 2019 в 10:35
2019-07-23T10:35:49+00:00
さらに
ソース
編集
#11525400
< div class = "form-group col-md-3">。 < label class = "control-label"> Default Iamge< / label>
                @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>
0
0
 Melle
Melle
3日 10月 2019 в 10:09
2019-10-03T10:09:09+00:00
さらに
ソース
編集
#11525403

Reactでは、ファイルが小道具にある場合、以下を使用できます。


{props.value instance of File&& (。
    < img src = {URL.createObjectURL(props.value)} />。
)}。
``。
0
0
Steve Jiang
Steve Jiang
28日 3月 2017 в 11:28
2017-03-28T11:28:15+00:00
さらに
ソース
編集
#11525395

それは私のコードです。サポートIE [6-9]、クロム17+、ファイアフォックス、オペラ11+、Maxthon3。

<。!-スニペットを開始:js hide:false console:true babel:false -->。 <。!-言語:lang-html -->。

< input type = "file" id = "netBarBig" onchange = "changeFile(this)" />。 < img src = "" id = "imagePreview" style = "width:120px; height:80px;" alt = "" />。
function previewImage(fileObj, imgPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png";  //allowed to upload file type
    document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("don't support  Safari6.0 below broswer");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                fileObj.blur(); 
                var newPreview = document.getElementById(imgPreviewId);

                newPreview.style.border = "solid 1px #eeeeee";
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                newPreview.style.display = "block";

            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7 below
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+ 
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("only support" + allowExtention + "suffix");
        fileObj.value = ""; //clear Selected file
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }

    }
}
function changeFile(elem) {
    //file object , preview img tag id
    previewImage(elem,'imagePreview')
}

<。!-終了スニペット-->。

 dgknca
dgknca
編集した答え 7日 6月 2019 в 11:01
0
0
 Wooster
Wooster
14日 8月 2019 в 9:59
2019-08-14T09:59:48+00:00
さらに
ソース
編集
#11525401

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>
  )
}
0
0
 vishpatel73
vishpatel73
21日 8月 2019 в 6:55
2019-08-21T06:55:39+00:00
さらに
ソース
編集
#11525402

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)。 != "未定義"){。 var dvPreview = $( "#divImageMediaPreview");。 dvPreview.html( "");。 $($(this)[0] .files).each(function(){。 var file = $(this);。 varリーダー=新しいFileReader();。 reader.onload =関数(e){。 var img = $( "< img />");。 img.attr( "style"、 "width:150px; highth:100px; padding:10px");。 img.attr( "src"、e.target.result);。 dvPreview.append(img);。 }。 reader.readAsDataURL(ファイル[0]);。 });。 }その他{。 alert( "このブラウザはHTML5 FileReaderをサポートしていません。");。 }。 });。 。

コーデペンの作業デモ。

jsfiddleでデモを行う。

これが役立つことを願っています。

 vishpatel73
vishpatel73
編集した答え 21日 8月 2019 в 7:18
0
0
関連コミュニティ 1
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
4 ユーザー
日本人コミュニティのjavascript @react_ja @php_ja
開く telegram
質問の追加
カテゴリ
すべて
技術情報
文化・レクリエーション
生活・芸術
科学
プロフェッショナル
事業内容
ユーザー
すべて
新しい
人気
1
365
登録済み 1日前
2
True Image
登録済み 1日前
3
archana agarwal
登録済み 3日前
4
Maxim Zhilyaev
登録済み 6日前
5
adambotsfford adambotsfford
登録済み 1週間前
DA
DE
EL
ES
FI
FR
ID
IT
JA
LT
LV
NL
PT
RU
ZH
© de-vraag :年
ソース
stackoverflow.com
ライセンス cc by-sa 3.0 帰属