下記サンプルで実装し、ドロップしたファイル名が画面に表示されましたが、
このファイル名の横に削除ボタンを付けて、押下した場合、ドロップしたファイルを削除するようにしたいです。
jqueryはあまく詳しくなくて、自分ではなかなかうまくできませんでした。
やりかたをご存じの方は、ご教示をお願い致します。
■HTMLソース
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="js/common/filedrop.js"></script>
</head>
<body>
<div id="dropable">ファイルをここにドロップしてください。</div>
</body>
</html>
■jsソース
(function(global, $) {
"use strict";
var util = {
// ブラウザのデフォルトの動作と、イベントの伝播をキャンセルする
stop: function(e) {
e.preventDefault();
e.stopPropagation();
},
// strを指定の長さで切り取る
cutoff: function(str, len, tail) {
tail = tail || "";
return str.slice(0, len) + tail;
}
}
$(function() {
var $dropArea = $("#dropable");
// ドラッグ関連のイベントをすべてキャンセルして、ドロップイベントを設定
$dropArea.on({
"dragenter": util.stop,
"dragover": util.stop,
"dragleave": util.stop,
"drop": function(e) {
util.stop(e);
// filesはargumentsのようなオブジェクトなので配列に変換
var tmp = e.originalEvent.dataTransfer.files,
files = Array.prototype.slice.call(tmp, 0, tmp.length);
files.forEach(function(file) {
var reader = new FileReader();
// 読み込みが完了した時のイベントを設定
$(reader).one('load', function(e) {
var fn = "ドロップされたファイル名:" + file.name,
msg = [fn].join("\n");
$dropArea.append( $("<pre></pre>").text(msg) );
});
// ファイルをテキストとして読み込む
reader.readAsText(file);
});
}
});
});
}(this, jQuery));
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ドロップした項目の横に削除ボタンを表示して、それを押すとその項目(DOM element)がdocumentから削除されるということでよろしいでしょうか。
そのサンプルを改変してやってみました。
https://jsfiddle.net/3k8gLw06/
項目ごとに、divタグの中にpreタグとbuttonタグを作り、buttonのclick時にそのparentつまりdivをremoveすることでchild要素も削除されます。
No.1
- 回答日時:
ユーザーがファイルをつかめる状態なのだから
わざわざブラウザ上から削除なんてさせずに
ユーザー自ら削除すればいいだけなので
命題は誤動作によるトラブルばかり助長する不要なUIだと思います
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
jQuery 同じ処理を関数にまとめ...
-
ページ内に複数表がある場合のT...
-
HTML5でファイルドラッグ&ドロ...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
C#テキストボックスの文字を配...
-
同じIDで定義した要素の配列を...
-
アクセス時からのカウントダウ...
-
二次元配列を使って順位をだす...
-
pdfに丸秘などのスタンプを...
-
bt_melter.jsをサイトの一部の...
-
javaScriptのコードの修正をお...
-
ASP+アクセスでのSQLコメントに...
-
JavaScript window.openで開く...
-
C#OpenCv V4にのエラーに関する...
-
gas スプレッドシートがアクテ...
-
MFCのキャプション変更
-
船のゲームを作っているのです...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
クリックすると上に開くアコー...
-
XMLHttpRequestでキャッシュを...
-
ajax反映後のjqueryが動かない
-
要素名がスペースを含む場合のj...
-
function(e)の意味を教えてくだ...
-
jQueryの :not() .not() が有効...
-
jQueryでzipを解凍読み込みする...
-
getElementByIdを使用したグロ...
-
関数名をテキストから読み込む...
-
jqueryuiのdialog
-
addEventListener()でリスナー...
-
jqueryのグローバル変数とロー...
-
jQuery 同じ処理を関数にまとめ...
-
drawImageの描画順序の指定につ...
-
XMLHttpRequestオブジェクトが...
-
jQueryが読み込めない
おすすめ情報