アップロード画像プレビュー JS スクリプト 入力ファイル画像プレビューの実装例_JavaScript スキル
深センでプロジェクトに取り組む場合、ユーザーがアバターのプレビューをアップロードする機能が必要です。ネットで色々調べましたが、あまり満足できませんでした。フラッシュであるか、Ajax アップロード後に画像パスを返すか、単に使用できないかのいずれかです。幸いなことに、このプロジェクトの前に誰かが画像プレビュー関数を作成していたので、将来自分自身の便宜のために、そしてそれを必要とする他の友人の便宜のために、ここに記録を作成しました。
コードは次のように非常に単純です:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>テストは IE8、FF12.0、Google Chrome 28.0.1500.72 で動作します!
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7651
15
1392
52
91
11
36
110
Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか?
Aug 18, 2023 pm 01:51 PM
Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか? Vue プロジェクトでは、多くの場合、多数の画像を表示する必要があるため、ユーザーがこれらの画像を簡単に参照してプレビューできることを望んでいます。この記事では、Vue コンポーネントを使用して画像のスクロール機能やサムネイル プレビュー機能を実装する方法を紹介します。まず、画像のスクロールとサムネイル プレビューを容易にするために、適切な Vue ライブラリをインストールして導入する必要があります。この例では、vue-awesome-swiper と vue-image-preview の 2 つのライブラリを使用して実装します。
Douyinのコメントに写真を投稿する方法
Feb 19, 2024 pm 01:10 PM
Douyin は世界で最も人気のあるショートビデオ共有プラットフォームの 1 つとして、何億人ものユーザーを魅了してきました。他の人の素晴らしい作品を見るとき、私たちはその中のダイナミックで興味深い、意味のある瞬間に感動することがよくあります。このとき、テキストコメントで自分の意見や考えを表現するだけでなく、画像コメントで感情をより鮮明に表現することもできます。では、TikTokに画像コメントを投稿するにはどうすればよいでしょうか?まず、Douyin APPを開き、興味のあるビデオを入力します。次に、さまざまな状況に応じて携帯電話のオペレーティング システムを決定する必要があります。
将来の機能への早期アクセス Safari テクノロジー プレビュー 173 がリリース
Jul 02, 2023 pm 01:37 PM
Apple は本日、Safari 17 で開始される可能性のあるいくつかの機能をカバーする Safari テクノロジー プレビュー バージョン 173 をリリースしました。このバージョンは macOS Sonoma ベータ版および macOS Ventura システムに適しており、興味のあるユーザーは公式 Web サイトからダウンロードできます。 Safari Technology Preview バージョン 173 では、設定に機能フラグ ブロックが追加され、元の開発メニューの実験的機能が置き換えられます。このセクションを使用すると、開発者は特定の機能をすばやく検索し、さまざまな方法でステータスを「安定」、「テスト可能」、「プレビュー」、または「開発者」としてマークできます。再設計された開発メニューにより、クリエイターは Web ページ、Web アプリ、他のアプリの Web コンテンツを構築するための主要なツールを簡単に見つけることができます。
Vueフォーム処理でフォーム画像のアップロードとプレビューを実装する方法
Aug 10, 2023 am 11:57 AM
Vue フォーム処理でフォーム イメージのアップロードとプレビューを実装する方法 はじめに: 最新の Web アプリケーションでは、フォーム処理は非常に一般的な要件です。一般的な要件の 1 つは、ユーザーが画像をアップロードしてフォームでプレビューできるようにすることです。フロントエンド フレームワークとして、Vue.js は、この要件を達成するための豊富なツールとメソッドを提供します。この記事では、Vue のフォーム処理に画像のアップロードとプレビュー機能を実装する方法を説明します。ステップ 1: Vue コンポーネントを定義する まず、Vue グループを定義する必要があります
Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか?
Aug 19, 2023 pm 09:25 PM
Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか?概要: 最新の Web アプリケーションでは、画像のアップロードとプレビューが一般的な要件です。 Vue は、人気のある JavaScript フレームワークとして、この機能を実現する便利な方法を提供します。この記事では、フロントエンド インターフェイスの設計とバックエンド インターフェイスの処理を含め、Vue を使用して画像をアップロードおよびプレビューする方法を紹介します。フロントエンド インターフェイスの設計: まず、画像を選択してアップロードするためのフロントエンド インターフェイスを設計する必要があります。 Vue では、<i を使用できます。
uniappで画像のアップロードとプレビューを実装する方法
Oct 21, 2023 am 11:48 AM
uniapp で画像のアップロードとプレビューを実装する方法 最新のソーシャル ネットワークおよび電子商取引アプリケーションでは、画像のアップロードとプレビュー機能は非常に一般的な要件です。この記事では、uniappに画像アップロード機能とプレビュー機能を実装する方法と具体的なコード例を紹介します。 1. 画像アップロード機能の実装 uniapp プロジェクトでは、以下に示すように、まず画像アップロード コンポーネントをページに追加する必要があります: <template><view><im
プレビューや印刷時にすべてが表示されない場合はどうすればよいですか?
Mar 01, 2023 pm 02:45 PM
プレビューおよび印刷時にすべてが表示されない問題の解決策: 1. WPS Office フォームを開き、ワークバー領域の左上隅にある「印刷プレビュー」をクリックします; 2. 印刷プレビュー ページに入り、「拡大縮小率」をクリックします。 ; 3. 表示されるドロップダウンリストで、「横」または「縦」から該当する比率を選択します。
win11 プレビュー プログラムのエラー報告問題を解決する
Jan 14, 2024 pm 05:33 PM
Windows システムのプレビュー プログラムで Windows 11 システムを更新およびアップグレードできますが、プレビュー プログラムに参加するときに多くの友人がエラー コード 0x0 に遭遇しました。これは、システムにレジストリの一部が欠落しているためです。再エクスポートできます。それを解決するために、一緒に見てみましょう。 win11 プレビュー プログラムのエラーに対処する方法. 方法 1: 1. システムが最新バージョンではない場合は、システム アップデートで更新を試みることができます。方法 2: 1. エラーはレジストリに問題がある可能性もありますので、レジストリ修復ツールを使用して修復してみてください。方法 3: 1. このサイトから win11 システムを直接ダウンロードしてインストールします。 2. ダウンロード後、このサイトのチュートリアルに従ってインストールするだけです。
