ホームページ ウェブフロントエンド jsチュートリアル アップロードされた画像、画像サイズの検証、jquery_jquery に基づく画像プレビュー効果コード

アップロードされた画像、画像サイズの検証、jquery_jquery に基づく画像プレビュー効果コード

May 16, 2016 pm 06:07 PM
画像をアップロードする プレビュー

jquery は、アップロードされた画像と画像サイズの検証、画像プレビュー効果コードを実装します
アップロードされた画像の検証

コピー コード コードは次のとおりです:

*/
function submit_upload_picture(){
var file = $('file_c').value;
if(!/.( gif|jpg |jpeg|png|gif|jpg|png)$/.test(file)){
alert("画像の種類は .gif、jpeg、jpg、png のいずれかである必要があります")
} else{
$('両方のフォーム').action="file!upload.action";
$('両方のフォーム').sethtml('< ;img src="http://images.anjiwu.com/images/loading.gif"/>');
$('display_div').setstyle('display', 'block'); >$ ('upload_div').setstyle('display', 'none');
}
}


画像の種類とサイズの検証

//例 2
function validate_edit_logo(a ){
var file = $('file').value;
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
alert(" 画像タイプは .gif、jpeg、jpg、png のいずれかである必要があります")
if(a==1){
return false
}
}else{
var image = new image();
var height = image.height;
var filesize = image.filesize; 🎜>$( 'beforeend').src=file;
$('div_regi_right').setstyle('display', 'block');
if(幅>80 && 高さ>80 && ファイルサイズ>102400 ){
alert('80*80 ピクセルまたは 100k 未満の画像をアップロードしてください');
if(a==1){
return false;
}
if(a ==1){
return
}
}
}



画像プレビュー



コードをコピーします
コードは次のとおりです: //例 3function viewimg(index) { var name = 'uploadimg' インデックス; var imgup = $(name);
var local = imgup.value;
var point = local. lastindexof(".");
//アップロードされたファイルのサイズを決定します
var img = document.createelement("img");
img.src = local; .filesize;
img.onload = function (){filesize=this.filesize;}
if(img.filesize>5242880){
alert("画像ファイルが大きすぎます! ");
return false;
}
//画像形式かどうかを判定します
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.値.長さ);
imgname = imgname.to lowercase();
if ((imgname != ".gif") && (imgname != ".jpeg") && ( imgname != ".png") && (imgname != ".bmp")) {
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");
imgup.focus();ファイル内 www.3ppt.com
imgup.select();
document.selection.clear();
} else {
//画像を表示
document.getelementbyid("sig_preview") Index) .innerhtml = "";
}
if (index >=3){
var cnt = Index 1;
$("img" cnt)。スタイル.display = "";
}
}

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか? Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか? Aug 18, 2023 pm 01:51 PM

Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか? Vue プロジェクトでは、多くの場合、多数の画像を表示する必要があるため、ユーザーがこれらの画像を簡単に参照してプレビューできることを望んでいます。この記事では、Vue コンポーネントを使用して画像のスクロール機能やサムネイル プレビュー機能を実装する方法を紹介します。まず、画像のスクロールとサムネイル プレビューを容易にするために、適切な Vue ライブラリをインストールして導入する必要があります。この例では、vue-awesome-swiper と vue-image-preview の 2 つのライブラリを使用して実装します。

Douyinのコメントに写真を投稿する方法 Douyinのコメントに写真を投稿する方法 Feb 19, 2024 pm 01:10 PM

Douyin は世界で最も人気のあるショートビデオ共有プラットフォームの 1 つとして、何億人ものユーザーを魅了してきました。他の人の素晴らしい作品を見るとき、私たちはその中のダイナミックで興味深い、意味のある瞬間に感動することがよくあります。このとき、テキストコメントで自分の意見や考えを表現するだけでなく、画像コメントで感情をより鮮明に表現することもできます。では、TikTokに画像コメントを投稿するにはどうすればよいでしょうか?まず、Douyin APPを開き、興味のあるビデオを入力します。次に、さまざまな状況に応じて携帯電話のオペレーティング システムを決定する必要があります。

将来の機能への早期アクセス Safari テクノロジー プレビュー 173 がリリース 将来の機能への早期アクセス 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フォーム処理でフォーム画像のアップロードとプレビューを実装する方法 Vueフォーム処理でフォーム画像のアップロードとプレビューを実装する方法 Aug 10, 2023 am 11:57 AM

Vue フォーム処理でフォーム イメージのアップロードとプレビューを実装する方法 はじめに: 最新の Web アプリケーションでは、フォーム処理は非常に一般的な要件です。一般的な要件の 1 つは、ユーザーが画像をアップロードしてフォームでプレビューできるようにすることです。フロントエンド フレームワークとして、Vue.js は、この要件を達成するための豊富なツールとメソッドを提供します。この記事では、Vue のフォーム処理に画像のアップロードとプレビュー機能を実装する方法を説明します。ステップ 1: Vue コンポーネントを定義する まず、Vue グループを定義する必要があります

Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか? Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか? Aug 19, 2023 pm 09:25 PM

Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか?概要: 最新の Web アプリケーションでは、画像のアップロードとプレビューが一般的な要件です。 Vue は、人気のある JavaScript フレームワークとして、この機能を実現する便利な方法を提供します。この記事では、フロントエンド インターフェイスの設計とバックエンド インターフェイスの処理を含め、Vue を使用して画像をアップロードおよびプレビューする方法を紹介します。フロントエンド インターフェイスの設計: まず、画像を選択してアップロードするためのフロントエンド インターフェイスを設計する必要があります。 Vue では、&lt;i を使用できます。

uniappで画像のアップロードとプレビューを実装する方法 uniappで画像のアップロードとプレビューを実装する方法 Oct 21, 2023 am 11:48 AM

uniapp で画像のアップロードとプレビューを実装する方法 最新のソーシャル ネットワークおよび電子商取引アプリケーションでは、画像のアップロードとプレビュー機能は非常に一般的な要件です。この記事では、uniappに画像アップロード機能とプレビュー機能を実装する方法と具体的なコード例を紹介します。 1. 画像アップロード機能の実装 uniapp プロジェクトでは、以下に示すように、まず画像アップロード コンポーネントをページに追加する必要があります: &lt;template&gt;&lt;view&gt;&lt;im

プレビューや印刷時にすべてが表示されない場合はどうすればよいですか? プレビューや印刷時にすべてが表示されない場合はどうすればよいですか? Mar 01, 2023 pm 02:45 PM

プレビューおよび印刷時にすべてが表示されない問題の解決策: 1. WPS Office フォームを開き、ワークバー領域の左上隅にある「印刷プレビュー」をクリックします; 2. 印刷プレビュー ページに入り、「拡大縮小率」をクリックします。 ; 3. 表示されるドロップダウンリストで、「横」または「縦」から該当する比率を選択します。

win11 プレビュー プログラムのエラー報告問題を解決する win11 プレビュー プログラムのエラー報告問題を解決する Jan 14, 2024 pm 05:33 PM

Windows システムのプレビュー プログラムで Windows 11 システムを更新およびアップグレードできますが、プレビュー プログラムに参加するときに多くの友人がエラー コード 0x0 に遭遇しました。これは、システムにレジストリの一部が欠落しているためです。再エクスポートできます。それを解決するために、一緒に見てみましょう。 win11 プレビュー プログラムのエラーに対処する方法. 方法 1: 1. システムが最新バージョンではない場合は、システム アップデートで更新を試みることができます。方法 2: 1. エラーはレジストリに問題がある可能性もありますので、レジストリ修復ツールを使用して修復してみてください。方法 3: 1. このサイトから win11 システムを直接ダウンロードしてインストールします。 2. ダウンロード後、このサイトのチュートリアルに従ってインストールするだけです。

See all articles