javascript 入力画像のアップロードとプレビュー、FileReader プレビュー画像

FileReader は、フロントエンドのファイル処理、特に画像処理にとって重要な API です。画像処理の原理を知りたい場合は、これを回避することはできません。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<スタイル タイプ="text/css">
		.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //ここで入力ボックスを透明にし、ボタン上に絶対配置します。 .btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}
		</スタイル>
	</head>
	<本文>
		<button class="btn">画像</button>
		<input type="file" id="file" accept="image/jpg,imgae/jpeg,image/png" class="file-ipt" onchange="insertimg(this);"><br>
		<img src="" id="img1" alt="">
		<スクリプト言語="javascript">
			関数 insertimg(img){
				var rd = 新しいFileReader();
				ファイル=img.files[0];
				var ファイルタイプ = files.type.slice(6,10);
				ファイルタイプ!='jpg'&&ファイルタイプ!='jpeg'&&ファイルタイプ!='png'){
					alert('png、jpeg、jpg の画像形式のみがサポートされています');
					戻る;
				}それ以外{
					rd.readAsDataURL(ファイル);
					rd.onloadend=関数(e){
						document.getElementById('img1').src=e.target.result;
						document.getElementById('img1').style.width="300px";
						document.getElementById('img1').style.height="auto";
					};
				}
			}
		</スクリプト>
	</本文>
</html>

知識ポイント補足：JS入力ファイル画像アップロードプレビュー効果

まず、ファイルと FileReader API について学習します。1 つ以上のファイルを選択すると、選択したファイルを表す 1 つ以上の File オブジェクトにアクセスできます。これらのオブジェクトは、FileList オブジェクトに含まれています。 type 属性が file であるすべての <input> 要素には、ユーザーが選択したファイルを保存するための files 属性があります。 Files には length プロパティと item メソッドがあります。files[index] または files.item(index) を通じて、選択したファイルオブジェクトを取得できます。変更イベントを使用して、入力ファイルの入力完了イベントをリッスンできます。

HTMLコード:

 <ul class="crgoods_uploadUl clearfix">
     <li><img src="img/product1.jpg"></li>
     <li><img src="img/product1.jpg"></li>
     <li class="add"><i>+</i>最大 20 枚の写真<input type="file" class="liAdd_flie" onchange="liUploadImg(this)"></li>
</ul>

jsコード:

//商品アルバム画像アップロードプレビュー関数liUploadImg(file){     
        if (file.files && file.files[0]){
            var リーダー = 新しい FileReader();
            reader.onload = 関数(evt){ 
                // imgUpload.src = evt.target.result;
                $('.crgoods_uploadUl li.add').before('<li><img src="'+evt.target.result+'"></li>');   
            }
            リーダー.readAsDataURL(file.files[0]);
        }それ以外{ 
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            ファイルを選択します。
            var src = document.selection.createRange().text;
            imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
        }
    }

また、詳細なAPIについては、https://segmentfault.com/a/1190000006600936を参照してください。

次に例を示します。

これで、JavaScript 入力画像のアップロードとプレビュー、FileReader プレビュー画像に関するこの記事は終了です。JavaScript ファイルのアップロードとプレビューに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: