コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 はローカル ファイルのサンプル コードを読み取ります_html5 チュートリアルのスキル

HTML5 はローカル ファイルのサンプル コードを読み取ります_html5 チュートリアルのスキル

WBOY
リリース： 2016-05-16 15:47:59
オリジナル
1668 人が閲覧しました

HTML 構造スタイルは次のとおりです:

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








スタイルの観点から、input 要素の入力ボックスを表示しないようにする必要があります。この場合、入力を透明なスタイルに設定してから覆う必要があります。 button 要素を選択した場合のみ、ボタンをクリックして画像をアップロードできます。画像ファイルのみのアップロードを許可するには、「image/*」に accept を設定します。

CSS スタイルは次のとおりです



コードをコピーしますコードは次のとおりです:
.addpic{
位置:相対;
幅:95px;
}
>背景: なし繰り返しスクロール 0 0 rgba(0, 0, 0, 0);
フォントサイズ: 30px;
位置: 絶対; 🎜>右: 0 ;
上: 0;
z-index: 10;


js コード





コードをコピーします

コードは次のとおりです。

function readFiles(evt){
var files=evt.target.files; if(!files){ console.log("ファイルが無効です"); return; }
for(var i=0, file; file=files[i ]; i ){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.onload=function() {
$("#showlogo ").attr("src",this.src)
}
}
}







コードをコピーします


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


$(document).ready(function(){
$("#logoimg").change(function(e ){
readFiles(e) });
関連ラベル：
html5
ソース：php.cn
前の記事：html5 メニュー折り紙効果_html5 チュートリアル スキル 次の記事：html5_html5チュートリアルスキルでのキャンバスの影効果の実装例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート