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

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

新規登録して質問してみよう
ただいま回答率
85.48%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

6343閲覧

jquery-file-uploadの基本的な動作について

takoyaki-ccc

総合スコア17

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/06 02:43

皆様初めまして

私は現在以下のものを利用してphpでファイルのアップロードを実装しております。
jquery-file-upload

vangrant+virtualHostの環境でドキュメントルート配下に「test」フォルダを作成し、その中に上記リンクよりダウンロードしたフォルダをそのまま格納して動かそうとしたところ、開発者ツールにて「http://127.0.0.1:10080/test/server/php/ 500 (Internal Server Error)」
と怒られてしまいました。。。
権限の問題かなと思い、設定ファイルで指定されているアップロード先「server/php」に権限を「777」としてみましたが、結果は変わりませんでした。
こちらを動かす際になにか足りない設定などは御座いますでしょうか?

html

1basic.html 2<!DOCTYPE HTML> 3<!-- 4/* 5 * jQuery File Upload Plugin Basic Demo 6 * https://github.com/blueimp/jQuery-File-Upload 7 * 8 * Copyright 2013, Sebastian Tschan 9 * https://blueimp.net 10 * 11 * Licensed under the MIT license: 12 * https://opensource.org/licenses/MIT 13 */ 14--> 15<html lang="en"> 16<head> 17<!-- Force latest IE rendering engine or ChromeFrame if installed --> 18<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> 19<meta charset="utf-8"> 20<title>jQuery File Upload Demo - Basic version</title> 21<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads."> 22<meta name="viewport" content="width=device-width, initial-scale=1.0"> 23<!-- Bootstrap styles --> 24<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 25<!-- Generic page styles --> 26<link rel="stylesheet" href="css/style.css"> 27<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> 28<link rel="stylesheet" href="css/jquery.fileupload.css"> 29</head> 30<body> 31<div class="navbar navbar-default navbar-fixed-top"> 32 <div class="container"> 33 <div class="navbar-header"> 34 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse"> 35 <span class="icon-bar"></span> 36 <span class="icon-bar"></span> 37 <span class="icon-bar"></span> 38 </button> 39 <a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a> 40 </div> 41 <div class="navbar-collapse collapse"> 42 <ul class="nav navbar-nav"> 43 <li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li> 44 <li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li> 45 <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li> 46 <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li> 47 </ul> 48 </div> 49 </div> 50</div> 51<div class="container"> 52 <h1>jQuery File Upload Demo</h1> 53 <h2 class="lead">Basic version</h2> 54 <ul class="nav nav-tabs"> 55 <li class="active"><a href="basic.html">Basic</a></li> 56 <li><a href="basic-plus.html">Basic Plus</a></li> 57 <li><a href="index.html">Basic Plus UI</a></li> 58 <li><a href="angularjs.html">AngularJS</a></li> 59 <li><a href="jquery-ui.html">jQuery UI</a></li> 60 </ul> 61 <br> 62 <blockquote> 63 <p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br> 64 Supports cross-domain, chunked and resumable file uploads.<br> 65 Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p> 66 </blockquote> 67 <br> 68 <!-- The fileinput-button span is used to style the file input field as button --> 69 <span class="btn btn-success fileinput-button"> 70 <i class="glyphicon glyphicon-plus"></i> 71 <span>Select files...</span> 72 <!-- The file input field used as target for the file upload widget --> 73 <input id="fileupload" type="file" name="files[]" multiple> 74 </span> 75 <br> 76 <br> 77 <!-- The global progress bar --> 78 <div id="progress" class="progress"> 79 <div class="progress-bar progress-bar-success"></div> 80 </div> 81 <!-- The container for the uploaded files --> 82 <div id="files" class="files"></div> 83 <br> 84 <div class="panel panel-default"> 85 <div class="panel-heading"> 86 <h3 class="panel-title">Demo Notes</h3> 87 </div> 88 <div class="panel-body"> 89 <ul> 90 <li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li> 91 <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li> 92 <li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li> 93 <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li> 94 <li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li> 95 <li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li> 96 </ul> 97 </div> 98 </div> 99</div> 100<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script> 101<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> 102<script src="js/vendor/jquery.ui.widget.js"></script> 103<!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 104<script src="js/jquery.iframe-transport.js"></script> 105<!-- The basic File Upload plugin --> 106<script src="js/jquery.fileupload.js"></script> 107<!-- Bootstrap JS is not required, but included for the responsive demo navigation --> 108<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 109<script> 110/*jslint unparam: true */ 111/*global window, $ */ 112$(function () { 113 'use strict'; 114 // Change this to the location of your server-side upload handler: 115 var url = window.location.hostname === 'blueimp.github.io' ? 116 '//jquery-file-upload.appspot.com/' : 'server/php/'; 117 $('#fileupload').fileupload({ 118 url: url, 119 dataType: 'json', 120 done: function (e, data) { 121 $.each(data.result.files, function (index, file) { 122 $('<p/>').text(file.name).appendTo('#files'); 123 }); 124 }, 125 progressall: function (e, data) { 126 var progress = parseInt(data.loaded / data.total * 100, 10); 127 $('#progress .progress-bar').css( 128 'width', 129 progress + '%' 130 ); 131 } 132 }).prop('disabled', !$.support.fileInput) 133 .parent().addClass($.support.fileInput ? undefined : 'disabled'); 134}); 135</script> 136</body> 137</html> 138

環境
centos6.7
apache2.4(apacheのテストページが表示されることは確認できております。)

ディレクトリ構造
<<ドキュメントルート>>
┗test
┣server
┃  ┗php
┃    ┗files(予想ではこちらにアップされると思っていました...)
┣js
┣img
┣css
┗cors

どなたか解決方法などご存知の方がいらっしゃいましたら、ご教授願えれば幸いです。宜しくお願い致します。

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

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

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

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

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

guest

回答2

0

自己解決

自己解決できました。
原因はサーバに必要な拡張モジュールなどをインストールしていないことが原因でした。mbstringやintl、gdやimagicなど(バージョンはPHPが7だったのでそれに合わせました。)をインストールした結果、アップロードからサムネイルの作成まで行うことができました。

投稿2018/11/08 08:08

takoyaki-ccc

総合スコア17

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

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

0

こちらを動かす際になにか足りない設定などは御座いますでしょうか?

サーバサイドでPHPを動作させる設定はできていますでしょうか。

投稿2018/11/06 02:48

maisumakun

総合スコア145183

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

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

takoyaki-ccc

2018/11/06 02:54

maisumakun様 回答いただき有難う御座います。 PHPの設定はできております。ドキュメントルートにindex.phpを作成し、画面にphpinfoを表示させることができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問