HTMLの画像アップロードについて
2649 ワード
HTMLの画像アップロードについて
このアップロード要素がフォームに含まれている場合、フォームのenctypeはmultiiprt/form-dataに指定しなければなりません.methodは必ずpostに指定してください.ブラウザは認識して正しく実行します.しかし、ブラウザはユーザーがクリックしてローカルファイルを選択するだけで、JavaScriptでのvalue割り当ては効果がありません.ユーザーがあるファイルをアップロードした後、JavaScriptもこのファイルの真実なパスを獲得できませんでした.しかし、FileとFileReaderの2つの主要なオブジェクトを利用して、ファイル情報を得てファイルを読み込む方法があります.例ファイル:file-uplload-demo.
HTMLファイル:
このアップロード要素がフォームに含まれている場合、フォームのenctypeはmultiiprt/form-dataに指定しなければなりません.methodは必ずpostに指定してください.ブラウザは認識して正しく実行します.しかし、ブラウザはユーザーがクリックしてローカルファイルを選択するだけで、JavaScriptでのvalue割り当ては効果がありません.ユーザーがあるファイルをアップロードした後、JavaScriptもこのファイルの真実なパスを獲得できませんでした.しかし、FileとFileReaderの2つの主要なオブジェクトを利用して、ファイル情報を得てファイルを読み込む方法があります.例ファイル:file-uplload-demo.
HTMLファイル:
CSS文件:
#test-image-preview {
border: 1px solid #ccc;
width: 100%;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
JavaScript:
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// change :
fileInput.addEventListener('change', function() {
// :
preview.style.backgroundImage = '';
// :
if(!fileInput.value) {
info.innerHTML = ' ';
return;
}
// File :
var file = fileInput.files[0];
//
var size = file.size;
if(size >= 1*1024*1024){
alert(' 1 !');
return false;
}
// File :
info.innerHTML = ' : ' + file.name + '<br>' +
' : ' + file.size + '<br>' +
' : ' + file.lastModifiedDate;
if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert(' !');
return;
// :
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64 )...}'
preview.style.backgroundImage = 'url(' + data + ')';
};
// DataURL :
reader.readAsDataURL(file);
console.log(file);
});