質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

263閲覧

ajax通信を行いたい 参考サイトのソースコードをうごがしたい

amaguri

総合スコア227

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/07/20 06:00

編集2017/07/21 09:11

実装したい機能
実装したい参考サイトコード

追記
リサイズの処理に行くまでは動くようになりました。
リサイズの処理をどのように実装したらエンコードの処理が走るようになりますでしょうか?

//html <div class="container clearfix"> <div class="row"> <div class="col-md-12"> <p>画像ファイルを選択してください(複数可)、1ファイル辺り10MBまでアップロード可能</p> </div> </div> <div class="row"> <div class="col-xs-2"> <span class="fileUpload btn btn-default"> ファイルを選択 <input type="file" class="uploadFile" accept="image/*" multiple/> </span> </div> <div class="col-xs-4" id="progress-container"> <!-- <div class="list-group-item"> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width: 0%;"> </div> </div> </div> --> </div> </div> <hr /> <div class="row"> <div class="col-md-12" id="image-files"> <ul class="list-inline list-unstyled"></ul> </div> </div> </div>

javaScript

1//js 2<script type="text/javascript"> 3var progressTemplate = "<div class=\"list-group-item\"><div class=\"progress progress-striped active\"><div class=\"progress-bar progress-bar-info\" style=\"width: 0%;\"></div></div></div>"; 4 5 $(function(){ 6 7 var def = $.Deferred(); 8 var promise = def; 9 10 $(".uploadFile").change(function() { 11 12 $.each(this.files, function(i, file){ 13 14 promise = promise.pipe(function(response){ 15 16 var newPromise = $.Deferred(); 17 18 var formData = new FormData(); 19 formData.enctype = "multipart/form-data"; 20 formData.append("MAX_FILE_SIZE", 10485760); 21 formData.append("file", file); 22 $("#progress-container").append(progressTemplate); 23 $.ajax({ 24 url: '/mypage/ディレクトリ/index.php', 25 type: 'POST', 26 dataType: 'text', 27 data: formData, 28 cache: false, 29 contentType: false, 30 processData: false, 31 xhr: function() { 32 var xhr = $.ajaxSettings.xhr(); 33 if (xhr.upload) { 34 xhr.upload.addEventListener('progress', function(evt) { 35 var percent = (evt.loaded / evt.total) * 100; 36 $("#progress-container").find(".progress-bar").width(percent + "%"); 37 }, false); 38 } 39 return xhr; 40 }, 41 success: function(imageData) { 42 $("#image-files ul").append("<li><img src=\"" + imageData + "\" /></li>"); 43 }, 44 error: function(xhr, textStatus, errorThrown) { 45 var res = {}; 46 try { 47 res = $.parseJSON(xhr.responseText); 48 } catch (e) {} 49 alert(res.errorMessage); 50 }, 51 complete: function() { 52 $("#progress-container").children().remove(); 53 newPromise.resolve(); 54 } 55 }); 56 return newPromise; 57 }); 58 }); 59 60 def.resolve(); 61 }); 62 }); 63 64</script>
<?php if (isset($_FILES['file']['error']) && is_int($_FILES['file']['error'])) { try { switch ($_FILES['file']['error']) { case UPLOAD_ERR_OK: break; case UPLOAD_ERR_NO_FILE: throw new RuntimeException('ファイルが選択されていません'); case UPLOAD_ERR_INI_SIZE: case UPLOAD_ERR_FORM_SIZE: throw new RuntimeException('ファイルサイズが大きすぎます'); default: throw new RuntimeException('その他のエラーが発生しました'); } // MIMEタイプチェック $mimeTypeCode = @exif_imagetype($_FILES['file']['tmp_name']); if (!in_array($mimeTypeCode, array(IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG), true)) { throw new RuntimeException('画像でないファイル、又は未対応の画像形式です'); } // 画像をリサイズ $thumbFileName = _resizeImage($_FILES['file']['tmp_name'], $mimeTypeCode); // 作成したサムネイルデータを取得してbase64エンコード if ($thumbFileName) { $imageFile = @base64_encode(@file_get_contents($thumbFileName)); $mimeTypeStr = @image_type_to_mime_type($mimeTypeCode); if ($imageFile && $mimeTypeStr) { // 画像を出力 echo "data:" . $mimeTypeStr . ";base64," . $imageFile; } else { // 作成したサムネイルが見つからない、MIMEタイプが取れていない際のエラー throw new RuntimeException('画像表示前になんらかのエラーが発生しました'); } } else { // リサイズでなんかエラー throw new RuntimeException('画像リサイズ中になんらかのエラーが発生しました'); } } catch (RuntimeException $e) { // レスポンスにエラー情報をセットする header('HTTP', true, 400); // bad requestを返すことにする $json = array(); $json['errorMessage'] = $e->getMessage(); echo json_encode($json); exit; } } exit; /** * 画像のリサイズ処理 * @param unknown_type $filename * @param unknown_type $mimeTypeCode * @param unknown_type $newWidth * @return NULL|string */ function _resizeImage($filename, $mimeTypeCode, $newWidth = 200) { // 省略 } /** * ランダム文字列生成 * @param unknown_type $length * @return string */ function _randomStr($length = 16) { // 省略 } ?>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/07/20 06:04

コードが1つの枠におさまっていると見づらいのでhtml、js、phpでわけていただいてよろしいでしょうか。
amaguri

2017/07/20 06:07

分けました、もしわかるようでしたらよろしくお願いします
m.ts10806

2017/07/25 04:08

冒頭が元の質問文からだいぶ削除されているように思います。当初の問題は解決したのであれば一度締めて別途質問してはいかがでしょうか?
amaguri

2017/07/25 04:19

そうしてみます
m.ts10806

2017/07/25 04:20

質問内容も当初のものに戻しておいてくださいね。回答と不整合がおきてしまいますので。
guest

回答1

0

ベストアンサー

$_FILES['file']['type']で得たmimetypeを利用して
$_FILES['file']['tmp_name']をimagecreatefromXXX()を利用して
展開するだけですよね?
この手の処理は完全にPHP側の処理なので、ajaxのUIとは切り離して
単純にこの部分だけ実装を考えればいいでしょう

PHP側の画像エンジン(GDやimagickなど)がきちんと設定されているか
確認しておいてください

投稿2017/07/20 06:15

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

amaguri

2017/07/20 06:22

phpの部分のエラーということでしょうか?
amaguri

2017/07/20 06:31

400番エラーなので クライアント側なエラーだと思っていましたが。。
amaguri

2017/07/20 08:30

GDの環境がないかもです。。ありがとうございます
amaguri

2017/07/20 08:51

調べてみてもうまく yumはmacでは使えるコマンドではなく動かなくて困っています。。
yambejp

2017/07/20 08:59

macはよくわからないですが、freebsdの派生なので プログラムの管理はportsの方が親和性が高いのでは? macportsとかですかね?
amaguri

2017/07/20 09:19

インストールしてみます。 ソースより環境のもんだいなのがわかり助かりました。 ありがとうござます! この仕様で実装したいと考えたいと思っていたのですが、、 環境いじらないといけないようなので実装はせず、 先ほどの回答のようで実装しようかなと思いました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問