1

参照:

JavaScriptまたはjqueryを使用してアップロードする前に画像をプレビューする方法は? javascript - アップロード前の画像プレビュー JavaScript を使用してアップロード前にプレビュー画像をアップロードする方法

私にとってはうまくいきませんでした...上記の参照から、ffでのみ機能するものもあれば、最初にアップロードしてからプレビューのみを表示するものもあります。

正確な解決策はhttp://blueimp.github.com/jQuery-File-Upload/にあります。

それは私がテストしたすべてで動作します。

機能していることがわかりましたが、コードが機能していません。それで、ブルーインプがフォローしているキーポイントは何ですか。アップロード前に画像プレビューを有効にすることができません。

私は試しました：

        $('.hidFileBtn').live('change', function(e){
            $childImg = $(this).closest('.parent').find('img.previewImg');
            var FileName = $(this).val();
            console.log(FileName + "-" + $(this)[0].value);
            $childImg[0].src = $(this).val();
        });

しかし、運がありません。

4

4 に答える 4

0

このリンクには良い答えがあります:アップロードする前に画像をプレビューする

<input type = "file" name = "fileFind" onchange = "readURL(this)" id = "fileFind" />
<img id = "imagePreview" src = "" alt = "" />

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

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

    reader.readAsDataURL(input.files[0]);
}
}
于 2018-02-15T06:21:55.740 に答える
0

このコードを JavaScript で記述し、この onchange="preview_image(event)" コードのようなファイル ボタン添付 onchange イベントを作成します。

function preview_image(event) 
{
  var reader = new FileReader();
  reader.onload = function()
  {
    var output = document.getElementById('output_image');
    output.src = reader.result;
  }
  reader.readAsDataURL(event.target.files[0]);
}
于 2016-06-09T07:08:39.913 に答える