ホームページ > 記事 > ウェブフロントエンド > HTML5 による画像アップロード、モバイル端末と PC 端末の共通コード共有
この記事は、HTML5 アップロード画像モバイル端末と PC 端末の一般的なコードの関連情報を主に紹介します。非常に優れており、必要な友人は参考にすることができます。
これ以上ナンセンスではないので、共有したいことについて話しましょう。今日は HTML5 で写真をアップロードします。モバイル端末で使用していますが、PC でも普遍的に互換性があります。Google でのみテストしています。 「HTML5 の File API を使用して、アップロードされた画像をプレビューする」は angular で書かれていました。今日は angular のことはやめて、html5 + js 画像アップロードの事例を共有します。それでは、今日は特定の手順に従ってみましょう。
HTML 最初のステップは HTML を作成することです。ページ内にファイル選択用の input#upload を配置します (PS: 面倒なので、ここでは再度ケースを作成せず、ページをコピーするだけです)。 )
<p class="con4"> <span class="btn upload">上传<input type="file" class="upload_pic" id="upload" /></span> </p>
CSS注: CSS が少しわかりにくい場合は、私に聞いてもいいし、自分で書いても構いません。
CSS Code复制内容到剪贴板 con{ width: %; height: auto; overflow: hidden; margin: % auto auto; color: #FFFFFF; } con .btn{ width: %; height: px; line-height: px; text-align: center; background: #dbc; display: block; font-size: px; border-radius: px; } upload{ float: left; position: relative; } upload_pic{ display: block; width: %; height: px; position: absolute; left: ; top: ; opacity: ; border-radius: px; }
getElementById を通じてノードを取得し、ブラウザーの互換性を判断します。FileReaderインターフェースをサポートしていないブラウザーの場合は、プロンプトが表示され、入力が無効になります。それ以外の場合は、変更イベントが発生します。入力は監視されます。
JavaScript Code复制内容到剪贴板 //获取上传按钮 var input = document.getElementById("upload"); if(typeof FileReader==='undefined'){ //result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); }
そして、file_inputのchangeイベントがトリガーされたときに、関数readFile()を呼び出します。 readFile では、まずファイル オブジェクト を取得し、次にファイルの type 属性 を通じてファイル タイプを検出します。もちろん、画像タイプのファイルの選択のみを許可し、次に FileReader インスタンスを new して呼び出します。 readAsDataURL メソッドで選択した画像ファイルを取得し、最後に onload イベントで正常に読み取られたファイルの内容を取得し、img ノードを挿入して選択した画像を表示します。
JavaScript Code复制内容到剪贴板 function readFile(){ var file = this.files[]; if(!/image\/\w+/.test(file.type)){ alert("文件必须为图片!"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); //当文件读取成功便可以调取上传的接口,想传哪里传哪里(PS: 你们可以把你们的靓照偷偷发给我!) reader.onload = function(e){ var data = this.result.split(','); var tp = (file.type == 'image/png')? 'png': 'jpg'; var a = data[]; //需要上传到服务器的在这里可以进行ajax请求 ... ... } };
これで画像のアップロード機能は完成しました。ご興味がございましたら、ご自身で試してみてください。わからない場合や間違っていた場合は、ご連絡ください。 FileReader のメソッドとイベント
以上がHTML5 による画像アップロード、モバイル端末と PC 端末の共通コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。