min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

AJAXとphpで画像ファイルのアップロードサイト

blog.asial.co.jp

このサイトそのままで作る。

upload_AJAX.html(index.htmlの代わり)でファイル選択

↓ アップロード

upload_AJAX.php が呼ばれて画像が表示される て流れ。

 

upload_AJAX.php

upload_AJAX.html からアップされた画像ファイル$_FILES['userfile'] を

・./uploads/image.jpg として保存する。

・アップされた画像をCurrent Imageとして表示する。

f:id:min117:20151114134530p:plain

f:id:min117:20151114134829p:plain

これはうまく動いた。phpのほうは正常動作してる。

表示はこんな感じ。

f:id:min117:20151114135333p:plain

index.htmlにあたるファイルも作ってみる。

upload_AJAX.html

f:id:min117:20151114135510p:plain

f:id:min117:20151114135443p:plain

これが何でか、うまく動かない。

画像読み込んで「html上の送信ボタン」を押しても、phpに遷移しない。

f:id:min117:20151114140456p:plain

htmlソース見直し。

しかし、

43行目で

 <form id="upload-form"

って宣言はしたし、

f:id:min117:20151114135916p:plain

この upload-formには、10-13行目でちゃんと

upload_AJAX.phpを指定してるはずなんだけど…なんで遷移しないんだ。

f:id:min117:20151114140240p:plain

$form = $('#upload-form');

にあるシャープ記号がよく分からん。これが原因か?とも思ったが、

リンクをクリックした時にformからPOST送信したい。 - HTML | 教えて!goo

を見ると、どうも全然関係ないらしい。

f:id:min117:20151114213459p:plain