ブラウザに画像をドロップして表示させる部分的な処理(javascript)。これを使って?

2021.10.07

Logging

本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。

ブラウザに画像をドロップして表示させる部分的な処理(javascript)

さて、ブラウザに画像をドロップして表示させる部分的な処理(javascript)を作りました。これらを使ってちょっとしたサービスを作っています。まだ完成はしていませんが完成できたらこちらで紹介しようと思っています。尚、部分的な処理なのでドロップしても画像をサーバーに保存させたりすることはないです。

ソースコードはこちらになります。

全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://zip358.com/tool/demo43/

        var obj_input = document.createElement("input");
        obj_input.type = "file";
        obj_input.accept = "image/png,image/jpeg";
        var element = document.getElementById("dropArea");
        element.addEventListener("dragover", function(e) {
            e.preventDefault();
            this.classList.add("dragover");
        });
        element.addEventListener("dragleave", function(e) {
            e.preventDefault();
            this.classList.remove("dragover");
        });
        element.addEventListener("drop", function(e) {
            e.preventDefault();
            element.classList.remove("dragover");
            if (/\.((png)|(jpeg)|(jpg))/i.test(e.dataTransfer.files[0].name) === true) {
                var obj = element;
                obj.innerHTML = e.dataTransfer.files[0].name;
                var imgfiles = e.dataTransfer.files;
                obj_input.files = imgfiles;
                var fr = new FileReader();
                fr.readAsDataURL(obj_input.files[0]);
                fr.onload = function() {
                    obj.style.backgroundImage = "url(" + fr.result + ")";
                    obj.style.backgroundSize = "cover";
                };
            }
        });

タグ

2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,

大量データをDBに高速にインストールする方法。

2019.04.13

Logging

LOAD DATA INFILE 'data.csv' INTO TABLE tblname FIELDS TERMINATED BY ',' LINES TERMINATED BY 'rn';

この一行の命令で…かなり高速にインストールできます。
インストールする前に、ファイルのチェックを行い整合性などが
正しければ一括にインストールするという具合がよろしいかと思われます。
 
https://www.youtube.com/watch?v=rrvL2-jqZ-4
ドロップシッピングの大量データを入れ込むときに役立ちそうだ・・・。
自分あまりSQLの事を知らないですね。そろそろSQLの知識も増やそうと
思っています。
 

タグ

-jqZ-, 2, 4, BY, com, CSV, data, db, FIELDS, INFILE, INTO, LINES, load, , nbsp, rrvL, SQL, TABLE, tblname, TERMINATED, youtube, インストール, かなり, シッピング, チェック, データ, とき, ドロップ, ファイル, 一括, 一行, , 具合, , 命令, 大量, 整合性, 方法, 知識, 自分, 高速,