HTML5 で単純な画像アップロードを実装する際に発生する問題と解決策-htmlチュートリアル-php.cn

HTML5 で単純な画像アップロードを実装する際に発生する問題と解決策

不言

リリース： 2018-05-08 15:58:00

オリジナル

1885 人が閲覧しました

この記事では、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コード

ここに書いたことは非常に単純で、h5アップロードの基本的な機能を使用しただけです

HTMLコードは次のとおりです、アクションはパスです要求された場合、ここで行うことは、アバターをアップロードおよび変更する場合、特にバックエンドインターフェイスに関連するコードを省略することはできません。問題と解決策に関する関連知識をお持ちであれば、それが皆さんのお役に立てば幸いです。

関連する推奨事項:
HTML5 は QR コードのスキャンと解析を実装します

HTML5 は WeChat 友達サークル QQ 友達 QQ スペース Weibo QR コード機能への共有を実装します

以上がHTML5 で単純な画像アップロードを実装する際に発生する問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。