javascript - FileReader を使用せずに画像のアップロードをプレビューする方法

Question

FireReader を使用せずに画像のアップロードをプレビューする (または偽造する) 方法はありますか?

Answer 1

ファイルを Ajax 経由でサーバーに送信し (可能です)、サーバーからその一時ファイルの URL を送り返してもらい、それをフロントエンドに表示させることができます。File API の使用を避けるのは少し面倒ですが、もしそうしなければならないのであれば、Flash に依存しない唯一の方法だと私は知っています...

インスピレーションを得るためだけでも、このプラグインを必ずチェックしてください。

これを行う他の多くの方法について詳しく説明しているこのスレッドを確認することもできます。

お役に立てれば！

Answer 2

私は大学のプロジェクト用に次のコードを書き、ローカルサーバーで正常に動作しています。アイデアは、ajaxがバイナリデータを処理できないため、iframeを使用することです。これらのフレームを非表示にします。phpフォームボタンを非表示にし、偽のボタンを使用してファイルを参照およびアップロードします（この場合、ユーザーがアップロードボタンを押すと、ユーザーのプロフィール写真を置き換えます）。削除または破棄ボタンのコードはまだ進行中のため含まれていませんが、簡単で、ajax 呼び出しを実行し、いくつかの php スクリプトを呼び出してその一時ファイルを削除できます。コードは大きく、すべての javascript/jquery、php、および html スニペットが含まれているので、不明な点がある場合は質問してください。

Javascript コード

var photoname;

$('#profilepic ').delegate('button#uploader1','click',function () {

if ($(this).prop("type") == "button") {
        $('#profilepic').attr('target','hiddenframe1').attr('action','/phpScripts/tempphoto.php');
        $('#uploadphoto').removeAttr('src');
        $('#profilepic input#photo').click();

        $(this).remove();
        $('<button type="submit" id="uploader2">Upload</button>').insertBefore($('#profilepic button#removephoto'));
        setTimeout(function () {
            var interval = setInterval(function () {
                if ($('#photo').val()) {
                    photoname = $('#photo').val().substring($('#photo').val().lastIndexOf('\\') + 1)
                   $('#profilepic input#submit').trigger('click', function (event) {})

                    setTimeout(function(){
                        $('#profilepic').css(
                            {
                        backgroundImage: 'url(/data/' + usr +'/'+photoname + ')'
                    })
                    },1000);
                    clearInterval(interval);
                }
            }, 200);
        }, 200);
    }


})

$('#profilepic ').delegate('#uploader2','click',function (){
    if ($(this).prop("type") == "submit") {

        $('#profilepic').attr('target','hiddenframe2').attr('action','/phpScripts/uploadphoto.php');
        $('#uploadphoto').attr('src','/phpScripts/uploadphoto.php');
        $('#profilepic input#submit').click();
        $(this).remove();
        $('<button type="button" id="uploader1">Browse</button>').insertBefore($('#profilepic button#removephoto'));
        document.getElementById('profilepic').reset();

    }
})

ページが初めて読み込まれたとき、または更新されたときの html ファイル

<form id="profilepic" target="hiddenframe1" action="/phpScripts/tempphoto.php" method="post" enctype="multipart/form-data" style="background-image: url(http://www.xyz.com/data/UDB/UDB.jpg); width: 180px; height: 180px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    <input type="file" name="photo" id="photo" style="display: none;">
    <input type="submit" name="submit" value="Submit" id="submit" style="display: none;">
    <button type="button" id="uploader1" style="display: none;">Browse</button>
    <button type="button" id="removephoto" style="display: none;">Remove</button> 
</form>

<iframe id="tempphoto" name="hiddenframe1" src="/phpScripts/tempphoto.php"></iframe>

<iframe id="uploadphoto" name="hiddenframe2"></iframe>

phpファイルtempphoto.php

<?php

session_start();
$dt=$_SESSION['uname'];
$dest=$_SERVER['DOCUMENT_ROOT']."/data/$dt/";
$filename;

if ($_FILES["photo"]["error"] > 0)
{
  echo "Error: " . $_FILES["photo"]["error"] . "<br>";
}
else
{
 echo "Upload: " . $_FILES["photo"]["name"] . "<br>";
 echo "Type: " . $_FILES["photo"]["type"] . "<br>";
 echo "Size: " . ($_FILES["photo"]["size"] / 1024) . " kB<br>";
 echo "Stored in: " . $_FILES["photo"]["tmp_name"];
 move_uploaded_file($_FILES['photo']['tmp_name'], $dest.$_FILES['photo']['name']);
 $filename=$_FILES["photo"]["name"];
 }

?>

phpファイルのアップロードphoto.php

<?php

session_start();
$dt=$_SESSION['uname'];
$dest=$_SERVER['DOCUMENT_ROOT']."/data/$dt/";
$filename;

if ($_FILES["photo"]["error"] > 0)
{
 echo "Error: " . $_FILES["photo"]["error"] . "<br>";
}
else
{
 echo "Upload: " . $_FILES["photo"]["name"] . "<br>";
 echo "Type: " . $_FILES["photo"]["type"] . "<br>";
 echo "Size: " . ($_FILES["photo"]["size"] / 1024) . " kB<br>";
 echo "Stored in: " . $_FILES["photo"]["tmp_name"];
 move_uploaded_file($_FILES['photo']['tmp_name'], $dest.$_FILES['photo']['name']);
 $filename=$_FILES["photo"]["name"];
}

 unlink($dest.$dt.".jpg");
 rename($dest.$filename,$dest.$dt.".jpg");
?>