KENT-WEB サポートコーナー 過去ログ [ 0101 ]

記事No： 16016
投稿日： 2018/09/28(Fri) 09:09:54
タイトル： Perlify Uploader　でアップロードできない。
ID情報： thr1978
投稿者： thr
URL： http://kcon-pro.or.jp/member/perlify10/index.cgi

お世話になります。

Perlify Uploader を設置したのですが
ファイル選択後のアプロード処理で
ブラウザ毎に動作する・しないが発生しています。

IEでは動作するのですが、動作しない場合は
ファイル選択後にプログレスバーが表示されずに
処理がすすみません。

動作確認の環境は下記の通りです。

　OS：Win10Pro　バージョン1803　
　IE：11.285.17134.0
　Edge：Microsoft Edge 42.17134.1.0
　Chrome：69.0.3497.100（Official Build） （64 ビット）

【質問】
　�．屮薀Ε極茲貌虻遒垢襦Δ靴覆い�あるのでしょうか。
　　あるブラウザでは対応しているが、その他はしていない等。

　��動作しない問題はブラウザの設定変更等で
　　解決可能でしょうか？。

自分なりにgoogleでも調べてみたのですが
動作しない原因がわからず、次の対応に移れない次第です。

お手数ですが、ご教授お願できないでしょうか。

記事No： 16019
投稿日： 2018/10/01(Mon) 09:33:36
タイトル： Re: Perlify Uploader　でアップロードできない。
ID情報： teketen
投稿者： てけてん

そうですね。
JavaScriptを利用しているため、記述方法によっては、対応していないブラウザがあるのだと思います。
KENTさんが採用されたのは、Uploadifyというプラグインです。
JavaScriptは詳しくないので、その何が原因かは分からないのですが。
ローカル環境で試してみましたが、確かに、動作しないブラウザがありました。
私の環境（Windows10）では、Windows Edgeは、ファイル選択さえも出来ませんでした。

現段階では、ブラウザの設定で、どうにか出来るとは思えませんので、動作するブラウザを使うしかありません。

ただ、別のJavaScriptのプラグインを使うと、アップロード出来ました。
試したブラウザは、Opera12.18、Vivaldi1.15.1147.42、Firefox59.0.3、CyberFox48.0.2、IE11、Windows Edgeです。
私が使用したのは、
https://danielmg.org/demo/java-script/uploader
こちらのものです。
ファイルをドラッグしてアップロード可能です。
勿論、一度に複数アップロード出来ます。

改造したり、ファイルをダウンロードしたりと作業がありますが、Uploadifyと併用されますか？
（今までのプラグインUploadifyも使えるようにご案内します）

記事No： 16027
投稿日： 2018/10/02(Tue) 07:44:20
タイトル： Re^2: Perlify Uploader　でアップロードできない。
ID情報： thr1978
投稿者： thr

てけてんさん

ご返信ありがとうございます。

ご案内いただいたプラグインのような操作性で
アップロードできるのであれば、使用していきたいと思います。

お手数でしょうが、よろしくお願いいたします。

記事No： 16030
投稿日： 2018/10/02(Tue) 10:48:50
タイトル： Re^3: Perlify Uploader　でアップロードできない。
ID情報： teketen
投稿者： てけてん

> ご案内いただいたプラグインのような操作性で
> アップロードできるのであれば、使用していきたいと思います。

了解しました。
但し、KENTさんが使用されたUploadifyとは違い、アップロードの際にサーバー上のファイルを確認する作業がありません。
ですので、サーバー上に同じファイル名が有る場合は、ファイル名の前に「time値-」が付加されるようにしてみました。
それでも宜しければ、以下の改造をしてみて下さい。

※改造は、自己責任でお願いします。
※何かあった際は、元に戻して下さい。
※お願いいたします。

------------------------------------------
まず、「dmUploader - jQuery Ajax File Uploader Widget」を
https://github.com/danielm/uploader/releases
より「Source code」からダウンロードします。
ダウンロードしたものを解凍して下さい。
使用するファイルは、demoフォルダ内の
demo-ui.js
styles.css
と、distフォルダ（中身も）です。

他に必要なJavaScriptプラグインをダウンロードします。
https://code.jquery.com/jquery-3.2.1.min.js
より、jquery-3.2.1.min.jsを
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js
より、bootstrap.min.cssとbootstrap.min.jsをそれぞれダウンロードして下さい。

次に、テンプレートファイルを作成します。
下記のhtmlをコピーして、テキストエディタにペーストして、utf8（BOMなし）で保存してくだい。
ファイル名は、form2.htmlとします。
他のテンプレートファイルと同じ、tmplディレクトリ（フォルダ）に格納して下さい。
文章は、自由に変更されて構いません（英語を変更して動作するかは、ご自分でお試し下さい。私は試していないので^^;）。
デザインを変更される場合は、class名は変更されても構いませんが、ID名は変更しないで下さい。
（class名を変更された場合は、スタイルシートも変更されて下さい）
以下のhtmlは、demoフォルダのindex.htmlファイルの内容に、demo-config.jsをPerlify用に改造して挿入したものです。
デザインも、Perlifyっぽくしています。

※外部スタイルシートやJavaScriptファイルなどのパスは、ご自分でアップロードされる場所に変更して下さい。

説明が長くなるので、htmlソースを記述してから、続きは返信に書きます。

以下が、form2.htmlの内容となります。
---------------------------------------------

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>!html_title!</title>

<link rel="stylesheet" type="text/css" href="perlify.css" />
<link rel="stylesheet" type="text/css" href="uploadify.css" />

<link rel="stylesheet" type="text/css" href="./bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./dist/css/jquery.dm-uploader.min.css" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script src="./dist/js/jquery.dm-uploader.min.js"></script>
<script src="demo-ui.js"></script>

<script type="text/javascript">
<!--
$(function(){
$('#drag-and-drop-zone').dmUploader({ //
url: 'uploadify.cgi',
maxFileSize: !maxdata2!,
extFilter: [!extension!],
fieldName: 'Filedata',
onDragEnter: function(){
this.addClass('active');
},
extraData: function() {
return {
"timestamp": $('#timestamp').val(),
"token": $('#token').val(),
"js": $('#js').val(),
};
},
onDragLeave: function(){
this.removeClass('active');
},
onInit: function(){
ui_add_log('Penguin initialized :)', 'info');
},
onComplete: function(){
ui_add_log('All pending tranfers finished');
},
onNewFile: function(id, file){
ui_add_log('New file added #' + id);
ui_multi_add_file(id, file);
},
onBeforeUpload: function(id){
ui_add_log('Starting the upload of #' + id);
ui_multi_update_file_status(id, 'uploading', 'Uploading...');
ui_multi_update_file_progress(id, 0, '', true);
},
onUploadCanceled: function(id) {
ui_multi_update_file_status(id, 'warning', 'Canceled by User');
ui_multi_update_file_progress(id, 0, 'warning', false);
},
onUploadProgress: function(id, percent){
ui_multi_update_file_progress(id, percent);
},
onUploadSuccess: function(id, data){
ui_add_log('Server Response for file #' + id + ': ' + JSON.stringify(data));
ui_add_log('Upload of file #' + id + ' COMPLETED', 'success');
ui_multi_update_file_status(id, 'success', 'Upload Complete');
ui_multi_update_file_progress(id, 100, 'success', false);
},
onUploadError: function(id, xhr, status, message){
ui_multi_update_file_status(id, 'danger', message);
ui_multi_update_file_progress(id, 0, 'danger', false);
},
onFallbackMode: function(){
ui_add_log('Plugin cant be used here, running Fallback callback', 'danger');
},
onFileSizeError: function(file){
ui_add_log('File \'' + file.name + '\' cannot be added: size excess limit', 'danger');
},
onFileTypeError: function(file){
ui_add_log('File \'' + file.name + '\' cannot be added: must be an image (type error)', 'danger');
},
onFileExtError: function(file){
ui_add_log('File \'' + file.name + '\' cannot be added: must be an image (extension error)', 'danger');
}
});
});
// -->
</script>

</head>

<body>
<div id="head">
<div id="head-in">
<h1 style="font-size:24px;">!html_title! : サブフォーム</h1>
<div id="panel">
<a href="!index_cgi!" class="button" style="width: 150px;margin-right: 6px;text-align: center;" />投稿フォーム</a>
<a href="!index_cgi!?mode=list" class="button" style="width: 150px;margin-right: 6px;text-align: center;" />ファイル一覧</a>
<a href="!index_cgi!?js=dm" class="button" style="width: 150px;margin-right: 6px;text-align: center;" />サブフォーム</a>
</div>
</div>
</div>
<div class="container">
<div class="ttl" style="background: #fff; padding: 8px;">!icon:add.png! サブフォーム
<ul>
<li><span style="color:#f00">通常は、「投稿フォーム」よりアップロードを行って下さい。<br />
こちらからのアップロードは、サーバー上のファイルの確認をせず、同ファイル名は、ファイル名の先頭にtime値と-が付加されます。</span></li>
<li>ファイルをアップロードするには下記 <b>「SELECT FILES」</b> ボタンをクリックして、ファイルを選択するか、指定領域にファイルをドラッグして下さい。</li>
<li>一度に複数のファイルを選択・ドラッグ・アップロードすることも可能です。
（Windowsでは、CTRLキーを押しながら複数選択）</li>
<li>選択可能なファイルは、<span>!allow_ext!</span> です。</li>
<li>アップロードが可能なファイルサイズは、最大 <span>!maxdata!</span> です。</li>
</ul></div>
</div>

<main role="main" class="container">
<div class="row">
<div class="col-md-6 col-sm-12">

<!-- Our markup, the important part here! -->
<div id="drag-and-drop-zone" class="dm-uploader p-5">
<h3 class="mb-5 mt-5 text-muted">ファイルを選択するか、この領域の上にドラッグします。</h3>

<div class="btn btn-primary btn-block mb-5">
<span>SELECT FILES</span>
<form>
<input id="timestamp" name="timestamp" type="hidden" value="!timestamp!" />
<input id="token" name="token" type="hidden" value="!md5:unique_salt!" />
<input id="js" name="js" type="hidden" value="dm" />
<input id="file_upload" name="Filedata" type="file" multiple="true" title='クリックで添付ファイル選択' />
</form>
</div>
</div><!-- /uploader -->

</div>

<div class="col-md-6 col-sm-12">
<div class="card h-100">
<div class="card-header">
添付ファイル一覧
</div>

<ul class="list-unstyled p-2 d-flex flex-column col" id="files">
<li class="text-muted text-center empty">今回アップロードしたファイルはありません。</li>
</ul>
</div>
</div>
</div><!-- /file list -->

<div class="row">
<div class="col-12">
<div class="card h-100">
<div class="card-header">
デバッグメッセージ
</div>

<ul class="list-group list-group-flush" id="debug">
<li class="list-group-item text-muted empty">Loading plugin....</li>
</ul>
</div>
</div>
</div> <!-- /debug -->

</main> <!-- /container -->

<footer class="text-center" style="font-size: x-small;">
<p>dmUploader: &copy; Daniel Morales &middot; <a href="https://www.danielmg.org">www.danielmg.org</a></p>
</footer>

<!-- File item template -->
<script type="text/html" id="files-template">
<li class="media">
<div class="media-body mb-1">
<p class="mb-2">
<strong>%%filename%%</strong> - Status: <span class="text-muted">Waiting</span>
</p>
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
role="progressbar"
style="width: 0%"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<hr class="mt-1 mb-1" />
</div>
</li>
</script>

<!-- Debug item template -->
<script type="text/html" id="debug-template">
<li class="list-group-item text-%%color%%"><strong>%%date%%</strong>: %%message%%</li>
</script>
</body>
</html>

記事No： 16031
投稿日： 2018/10/02(Tue) 10:51:23
タイトル： Re^4: Perlify Uploader　でアップロードできない。
ID情報： teketen
投稿者： てけてん

続きです。
index.cgiをテキストエディタで開いて下さい。
53行目付近

$tmpl =~ s|!icon:(\w+\.\w+)!|<img src="$cf{iconurl}/$1" class="icon" alt="" />|g;

の次の行に

$tmpl =~ s|!maxdata2!|int($cf{maxdata} / 1048576 * 1000000)|eg if($in{js} eq 'dm'); # 追加 ■■

を、挿入して下さい。
42行目付近

open(IN,"$cf{tmpldir}/form.html") or error('open err: form.html');

を

open(IN,"$cf{tmpldir}/$template") or error("open err: $template"); # 変更 ■■

に変更します。
その上の行に

my $template = $in{js} eq 'dm' ? 'form2.html' : 'form.html'; # 追加 ■■

を挿入して下さい。
32行目付近

$ext .= "*.$_; ";

を

$ext .= $in{js} eq 'dm' ? "\"$_\"," : "*.$_; "; # 変更 ■■

に変更して下さい。
index.cgiの改造は、以上です。
-----------------------------------------------------
次に、uploadify.cgiをテキストエディタで開いて下さい。

63行目付近

print '0';

を

if($q->param('js') eq 'dm') { # 改造のため変更 ■■
print "Content-type: application/json;charset=utf-8\n\n";
print qq|[{"status":"error","message":"error"}]\n|;
} else {
print '0';
}

に変更、49行目付近

open(OUT,"> $cf{upldir}/$fnam");

の上の行に

if($q->param('js') eq 'dm') { # 改造のため追加 ■■
$fnam = (split(/\\/,$fnam))[-1] if($fnam =~ /^[C-Z]:/);
$fnam = time . "-$fnam" if(-f "$cf{upldir}/$fnam");
}

を挿入して下さい。
uploadify.cgiの改造は、以上です。
-----------------------------------------------------
次に、テンプレートファイルform.htmlとlist.htmlをテキストエディタで開いて下さい。

<a href="!index_cgi!?mode=list" class="button" />ファイル一覧</a>

の次の行に

<a href="!index_cgi!?js=dm" class="button" />サブフォーム</a>

をそれぞれ挿入して下さい。
以上で改造は終了です。
この改造は、今までの機能も活かした上で、別の投稿フォームも利用する方法を取りました。

-----------------------------------------------------
あとは、改造したスクリプトの差し替えと、先にダウンロードしたJavaScriptや外部スタイルシートをタグで記述した場所にアップロードして下さい。

記事No： 16051
投稿日： 2018/10/05(Fri) 08:07:33
タイトル： Re^5: Perlify Uploader　でアップロードできない。
ID情報： thr1978
投稿者： thr
URL： http://kcon-pro.or.jp/member/perlify10/index.cgi

てけてんさん

お世話になります。

無事設置完了し、下記のブラウザで動作確認できました。

　IE：11.285.17134.0
　Edge：Microsoft Edge 42.17134.1.0
　Chrome：69.0.3497.100（Official Build） （64 ビット）

この度は、ご対応いただきありがとうございました。
大変助かりました。

よろしくお願いいたします。

記事No： 16028
投稿日： 2018/10/02(Tue) 07:49:52
タイトル： Re: Perlify Uploader　でアップロードできない。
ID情報： thr1978
投稿者： thr

各位

お世話になります。

おかげさまで、質問に対する回答が得られました。

参照先のCGIについて、
だれでもアップロード可能な状態でしたので
設定を変更させていただきます。

よろしくお願いいたします。

[検索ページ]