追記
リサイズの処理に行くまでは動くようになりました。
リサイズの処理をどのように実装したらエンコードの処理が走るようになりますでしょうか?
//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) { // 省略 } ?>
回答1件
あなたの回答
tips
プレビュー