ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5 で単純な画像アップロードを実装する際に発生する問題と解決策
この記事では、HTML5 で簡単な画像アップロードを実装する際に発生する問題と解決策に関する関連情報を主に紹介します。必要な友人はそれを参照してください 1. 表示
フロントエンドのアップロード ファイルはフォーム フォームを経由する必要があるため、 ajax は使用できません。以下に示すように、タイプ ファイルの入力をモバイル ページに配置するのは非常に面倒です。PC を使用している人がこの入力を置き換える解決策を探しました。 Flash では、uploadify などの jquery ツール ライブラリを使用してそれを行うことができますが、モバイル側のほとんどのブラウザは Flash をサポートしていません。したがって、最後の方法はフォームフォームを使用することです。フォームと入力の透明度を0に設定するだけで、表示されるコンテンツとそれらが同時にpになり、表示されるコンテンツは次のようになります。あなたが欲しいのです。コードは次のとおりです:
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style>
p{width: 100%;}
.logo img{display:block; margin:0 auto;}
.upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
margin: 0 auto;
}
.upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
.upload form input{width: 100%;}
</style>
</head>
<body>
<p class="logo">
<img src="img/1.jpg" />
</p>
<p class="upload">
<p>上传图片</p>
<form>
<input type="file" />
</form>
</p>
</body>
</html>
は上の画像のようになるので、「画像のアップロード」の p タグ内に表示されますクリックするとファイルを選択したような効果になります
2. JSコード
HTMLコードは次のとおりです、アクションはパスです要求された場合、ここで行うことは、アバターをアップロードおよび変更する場合、特にバックエンド インターフェイスに関連するコードを省略することはできません。問題と解決策に関する関連知識をお持ちであれば、それが皆さんのお役に立てば幸いです。
関連する推奨事項:
HTML5 は QR コードのスキャンと解析を実装します
HTML5 は WeChat 友達サークル QQ 友達 QQ スペース Weibo QR コード機能への共有を実装します
以上がHTML5 で単純な画像アップロードを実装する際に発生する問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。