画像を選択してサムネイルを表示します(サムネイルを自動生成します)
3023 ワード
参考:
dropを使ってクリックとドラッグ＆ドロップの選択/ファイルのアップロードを実現します。
以下は完全なコードです.コメントを見てください.
dropを使ってクリックとドラッグ＆ドロップの選択/ファイルのアップロードを実現します。
以下は完全なコードです.コメントを見てください.
/
var dropbox, imgUpload;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("dragleave", dragleave, false);
dropbox.addEventListener("drop", drop, false);
imgUpload = document.getElementById("imgUpload");
imgUpload.addEventListener("change", readFile, false)
// drop
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.background = '#666'
}
// drop
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
// drop
function dragleave(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.background = '#fbfbfb';
}
// drop / （ ）
function drop(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.background = '#fbfbfb';
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
//
function readFile() {
handleFiles(this.files);
}
//
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
//
if (!imageType.test(file.type)) {
continue;
}
// img
var img = document.createElement("img");
preview.appendChild(img);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
}
}