ホームページ >ウェブフロントエンド >jsチュートリアル >H5で画像アップロードプレビューコンポーネントを作成する方法
H5で画像アップロードプレビューコンポーネントを作成する方法
- php中世界最好的语言オリジナル
- 2018-03-10 16:19:422065ブラウズ
今回は、H5 で画像アップロード プレビュー コンポーネントを作成する方法を説明します。H5 で画像アップロード プレビュー コンポーネントを作成する際の 注意点 は何ですか?実際のケースを見てみましょう。
私の開発環境はWindows 10で、テストブラウザはChromeとFirefoxです互換性のないブラウザに遭遇した場合は、ブラウザをアップグレードするか、Googleで試してみてください(￣￣▽￣)~
name -ファイル名
サイズ-サイズ
タイプ-ファイルタイプ
lastModified-最終更新日
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>单选:<input type="file"/></label>
<label>多选:<input type="file" multiple="multiple"/></label>
</body></html>4. ファイルサイズとファイル形式を制限しますプレビューをアップロードするとき画像の場合は、ファイルをアップロードする必要があります。サイズと形式でフィルタリングします。現在、アップロードできるのは jpg と png で、ファイルのサイズが 2mb 以内であるとします。フィルターしたいファイルの種類をコンソールで表示し、入力してコピーして貼り付けますもちろん、input タグに accept="image/*" を設定して画像ファイルの入力のみを許可することもできます
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
<script>
function getFilesInfo(f){ console.log(f);
} </script>
<label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
<script>
function getFilesInfo2(evt) { var files = evt.target.files;
console.log(files);
} document.getElementById('files').addEventListener('change', getFilesInfo2, false); </script>
<label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
<script>
function getFilesInfo3(){ var files=document.getElementById("fileInput").files; console.log(files);
} </script>
</body></html> 5. プレビュー例
imgタグを動的に作成し、imgタグのsrc属性をバインドすることで実装プレビュー
例
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="file" id="files" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
var output = [];
for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>6. 単一画像アップロードのプレビュー例
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>过滤出图片</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>方法は習得できたと思います。この記事の事例を読んだ後は、PHP 中国語 Web サイトの他の関連記事にも注目してください。 関連書籍:
s-xlsxを使用してExcelファイルをインポートおよびエクスポートする方法
以上がH5で画像アップロードプレビューコンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。