fileapi ドラッグアンドドロップでデータを渡す
受付中
回答 1
投稿
- 評価
- クリップ 0
- VIEW 503
前提・実現したいこと
ドラッグアンドドロップでファイルの中身を、あらかじめ設定したキーワードで調べる
発生している問題・エラーメッセージ
phpへの値の渡し方がわからない。
ajaxとまでわかったけど、そのあとが、
エラーメッセージ
```
該当のソースコード
javascript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>File API Sample</title>
<style type="text/css">
file-input div.input {
padding: 60px;
border: solid 1px #333;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var inEle = $('#file-input div.input'),
outEle = $('#file-input div.out');
// ドラッグで画面遷移させない
inEle
.on('dragenter', function(e) {
e.preventDefault();
})
.on('dragover', function(e){
e.preventDefault();
})
.on('drop', function(e){
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
// 画像表示
for (var i=0; i<files.length; i++) {
if (files[i].type.match('image.*')) {
var reader = new FileReader();
//エラー処理
reader.onerror = function(e) {
console.log('error', e.target.error.code);
}
//読み込み後の処理
reader.onload = function(e){
outEle.append('<img src="'+e.target.result+'" />');
};
reader.readAsDataURL(files[i]);
}
}
// テキスト表示
/*
for (var i=0; i<files.length; i++) {
if (files[i].type === 'text/plain') {
var reader = new FileReader();
//エラー処理
reader.onerror = function(e) {
console.log('error', e.target.error.code);
}
//読み込み後の処理
reader.onload = function(e){
$('<div></div>').text(e.target.result).appendTo(outEle)
};
reader.readAsText(files[i], 'shift-jis');
}
}
*/
});
});
</script>
</head>
<body>
<p>ファイルをドロップしてください。</p>
<div id="file-input">
<div class="input"></div>
<div class="out"></div>
</div>
<?php
$geturl = $_POST['txt1'];
$word = $_POST['txt2'];
$chunks = spliti (" ", $word);
$result = count($chunks);
if($geturl != ""){
// HTMLソース取得
if($geturl != "") {
// あれやこれやと整形
$html = file_get_contents($geturl);
$html = htmlspecialchars($html);
$html = mb_ereg_replace('\r\n', '<br />', $html);
$html = mb_ereg_replace('\n', '<br />', $html);
$html = mb_ereg_replace('\r', '<br />', $html);
$html = mb_convert_encoding($html, "UTF-8");
$search = $html;
echo "<br><h3 class=\"h3_ttl\"><a href=\"$geturl\">$geturl</a></h3><ul>";
foreach($chunks as $chunk){
$chunk = preg_quote($chunk, '/');
if(!empty($chunk)){
preg_match_all("/($chunk)/",$html,$match);
if(!empty(count($match[0]))){
echo "<li>$chunk:" . count($match[0]) ."</li>";
}
}
}
echo "</ul>";
}
for ($s = 1 ; $s <= 20; $s++) {
if($s != "1") {
$serchurl = $geturl . "original". $s . ".html";
if($serchurl != "") {
if ($html = @file_get_contents($serchurl)) {
$html = htmlspecialchars($html);
$html = mb_ereg_replace('\r\n', '<br />', $html);
$html = mb_ereg_replace('\n', '<br />', $html);
$html = mb_ereg_replace('\r', '<br />', $html);
$html = mb_convert_encoding($html, "UTF-8");
$search .= $html;
echo "<br><h3 class=\"h3_ttl\"><a href=\"$serchurl\">$serchurl</a></h3><ul>";
foreach($chunks as $chunk){
$chunk = preg_quote($chunk, '/');
if(!empty($chunk)){
preg_match_all("/($chunk)/",$html,$match);
if(!empty(count($match[0]))){
echo "<li>$chunk:" . count($match[0]) ."</li>";
}
}
}
echo "</ul>";
}
}
} else if ($s == "1") {
$serchurl = $geturl . "original.html";
if($serchurl != "") {
$html = file_get_contents($serchurl);
$html = htmlspecialchars($html);
$html = mb_ereg_replace('\r\n', '<br />', $html);
$html = mb_ereg_replace('\n', '<br />', $html);
$html = mb_ereg_replace('\r', '<br />', $html);
$html = mb_convert_encoding($html, "UTF-8");
$search .= $html;
echo "<br><h3 class=\"h3_ttl\"><a href=\"$serchurl\">$serchurl</a></h3><ul>";
foreach($chunks as $chunk){
$chunk = preg_quote($chunk, '/');
if(!empty($chunk)){
preg_match_all("/($chunk)/",$html,$match);
if(!empty(count($match[0]))){
echo "<li>$chunk:" . count($match[0]) ."</li>";
}
}
}
echo "</ul>";
}
}
}
echo "<br><br><h3 class=\"h3_ttl\">合計</h3><ul>";
foreach($chunks as $chunk){
$chunk = preg_quote($chunk, '/');
if(!empty($chunk)){
preg_match_all("/($chunk)/",$search,$match);
if(!empty(count($match[0]))){
echo "<li>$chunk:" . count($match[0]) ."</li>";
}
}
}
echo "</ul>";
}
?>
</body>
</html>
試したこと
ajaxだと思ったのですが、テストしてみて値が渡らなかったです。
補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
Google に聞いてみたら、たくさん出てきましたので、検索上位の URL を書いていますが、やりたいことは、このようなことでしょうか？
http://blog.goo.ne.jp/xmldtp/e/9cc8e7b3bdfa2725fbc560904571b042
http://akisi.tabiyaku.net/?p=391
https://developer.mozilla.org/ja/docs/Using_files_from_web_applications
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.40%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/04/18 17:10
コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、質問文は適切に編集してください。
2016/04/19 07:17
こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。