ホームページ >ウェブフロントエンド >jsチュートリアル >html5 + javascript_javascript スキルを使用して単純なアップロードを実装する場合は、詳細に注意してください
html5 + javascript_javascript スキルを使用して単純なアップロードを実装する場合は、詳細に注意してください
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 15:04:532398ブラウズ
今朝 H5 アップロードを行ったときにいくつかのコードにあった落とし穴を簡単に記録します
1. 表示
フロントエンドのファイルのアップロードはフォームを経由する必要があり、ajax を使用できないため、この場合、ファイル タイプの入力をモバイル ページに配置することは、以下に示すように、あまり見栄えがよくありません。イライラしますね
PC ではこの入力を Flash に置き換えて、uploadify などの jquery ツール ライブラリを使用して解決策を探しましたが、モバイル側のほとんどのブラウザは Flash をサポートしていません。したがって、最後の方法はフォームフォームを使用することです。フォームと入力の透明度を0に設定するだけで、それらと表示されるコンテンツが同時にdivに配置され、表示されるコンテンツが見えるようにすることができます。あなたが望むように。コードは次のとおりです:
<!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>
div{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>
<div class="logo">
<img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" / alt="html5 + javascript_javascript スキルを使用して単純なアップロードを実装する場合は、詳細に注意してください" >
</div>
<div class="upload">
<p>上传图片</p>
<form>
<input type="file" />
</form>
</div>
</body>
</html>
図のように「画像をアップロード」のpタグ内に表示されますので、クリックするとファイルを選択した状態になります
。2. JS コード
ここに書いたことは非常に単純で、h5 アップロードの基本的な機能を使用しただけです
HTML コードは次のとおりです。ここで行うのは、ファイルの変更時にアバターをアップロードして変更することです。特に、input タグの name 属性は省略できません。バックエンドインターフェース
<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX"> <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" /> </form>
var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
var oFile = document.getElementById('imageFile').files[0]; //读取文件
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (!rFilter.test(oFile.type)) {
alert("文件格式必须为图片");
return;
}
if (oFile.size > iMaxFilesize) {
alert("图片大小不能超过2M");
return;
}
var vFD = new FormData(document.getElementById('uploadForm')), //建立请求和数据
oXHR = new XMLHttpRequest();
oXHR.addEventListener('load', function(resUpload) {
//成功
}, false);
oXHR.addEventListener('error', function() {
//失败
}, false);
oXHR.addEventListener('abort', function() {
//上传中断
}, false);
oXHR.open('POST', actionUrl);
oXHR.send(vFD);
};
細部が成功か失敗かを決定するので、何事も真剣に考えてください。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。