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

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

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

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Ajax

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

Q&A

解決済

2回答

1762閲覧

Ajax + Flaskでアップロードした画像をwebサーバー内に保存すると0バイトになってしまう

KoukoMatsumoto

総合スコア41

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Ajax

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

0グッド

0クリップ

投稿2017/12/20 09:24

編集2017/12/21 03:13

Flaskでウェブアプリケーションを作っております。
Ajaxでinput type="file"で選択した画像を含めたPOST送信をし、ファイルアップロードをさせる仕組みを作っておりますが、
webサーバー内に画像保存する際に、保存したファイルが0バイトの壊れたものになってしまいます。
jpg、pngなどいろいろ試してみましたがどれも壊れてしまいます。
何か、原因がわかる方はいらっしゃいますでしょうか?
ご教授願えますと幸いです。

環境:
Python 3.6.2 :: Anaconda, Inc.
Flask 0.12.1
Ubuntu16.04
Bootstrap4系

結果:
以下のフォームでpngをアップロードすると、/tmp/images以下にimage.pngが作成されるが0バイトで壊れている

html

1省略 2<form class='ajax_submit' method="post" action="/post" id="imageform" enctype="multipart/form-data"> 3 <input type="file" id="image" name="image" style="display: none" accept="image/*"> 4</form> 5省略 6<div id="exec"> 7 button 8</div> 9

python

1from flask import Flask, render_template, request, send_from_directory 2 3@app.route('/post', methods=['POST']) 4def post(): 5 upload_file = request.files['image'] 6 upload_file.save(os.path.join('/tmp/images', 'image.png')

javascript

1window.onload = function() { 2 var fileInput = document.getElementById('image'); 3 4 fileInput.addEventListener('change', function(e) { 5 var file = fileInput.files[0]; 6 var imageType = /image.*/; 7 8 if (file.type.match(imageType) &&) { 9 var reader = new FileReader(); 10 reader.readAsDataURL(file); 11 } 12 }); 13 14 $('#exec').click(function() { 15 var form = $("form#imageform"); 16 var formData = new FormData( $(form).get(0) ); 17 $.ajax({ 18 url: $(form).attr('action'), 19 type: 'post', 20 data: formData, 21 processData: false, 22 contentType: false, 23 success: function(data) { 24 $('#result').html(data); 25 }, 26 error: function() { 27 alert("Error"); 28 } 29 }); 30 }); 31}

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

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

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

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

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

guest

回答2

0

自己解決

upload_file = request.files['image']
upload_file.seek(0, os.SEEK_END)
app.logger.info(upload_file.tell())
upload_file.seek(0, 0)
upload_file.save(os.path.join('/tmp/images', 'image.png')
とすることで画像が正しく保存できました。
全文を乗せていないせいでご迷惑おかけして大変申し訳ございません・・・

投稿2017/12/22 07:10

KoukoMatsumoto

総合スコア41

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

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

0

<input type="file" id="image-file" name="image" style="display: none"

ファイルを非表示にしているのは何かあるのでしょうか?
選択しないとファイルは送れないと思いますが・・・

javascript

1$(function(){ 2 $('#exec').click(function() { 3 var form = $("form#imageform"); 4 var formData = new FormData( $(form).get(0) ); 5 $.ajax({ 6 url: $(form).attr('action'), 7 type: 'post', 8 data: formData, 9 processData: false, 10 contentType: false, 11 }).done(function(data) { 12 $('#result').html(data); 13 }).fail(function(xhr,err) { 14 console.log(err); 15 }); 16 }); 17});

HTML

1<form class='ajax_submit' method="post" action="/post" id="imageform" enctype="multipart/form-data"> 2<input type="file" id="image-file" name="image" accept="image/*"> 3</form> 4<div id="exec">button</div> 5<div id="result"></div> 6

追記

状況がいまいちまだわからないのですが
formdataをつかってajaxでpostしてるんですからfilereaderを使う意義がありません
同じデータをダブルで送ることになりませんか?

javascript

1$(function(){ 2 $('#exec').on('click',function() { 3 var form = $("form#imageform"); 4 var formData = new FormData( $(form).get(0) ); 5 var file = $('#image').prop('files')[0]; 6 var reader = new FileReader(); 7 var reg=new RegExp("image.*"); 8 if(!file.type.match(reg)) return false; 9 reader.onload=function(e){ 10 formData.append("userfile", new Blob([reader.result],{"type":file.type}),file.name ); 11 $.ajax({ 12 url: $(form).attr('action'), 13 type: 'post', 14 data: formData, 15 processData: false, 16 contentType: false, 17 }).done(function(data) { 18 $('#result').html(data); 19 }).fail(function(xhr,err) { 20 alert(err); 21 }); 22 }; 23 reader.readAsArrayBuffer(file); 24 }); 25}); 26

HTML

1<form class='ajax_submit' method="post" action="y.php" id="imageform" enctype="multipart/form-data"> 2 <input type="file" id="image" name="image" accept="image/*"> 3</form> 4<div id="exec">button</div> 5<div id="result"></div> 6

投稿2017/12/20 11:23

編集2017/12/21 04:26
yambejp

総合スコア114572

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

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

KoukoMatsumoto

2017/12/21 01:06

すみません、ここの処理のjsの記載がが漏れてました。ファイル選択部分のデフォルトのボタンは隠して、画像クリックでアップロードできるようにしています。 あとでソースを修正します。
KoukoMatsumoto

2017/12/21 03:14

javascriptのソースコードを追加させていただきました。 ちなみにですが、request.filesの部分には中身のあるデータが渡ってきております。(ファイル名などが取れているため)
yambejp

2017/12/21 04:26

追記しましたが今ひとつ状況がわかりません。 formdataでsubmitするのにfilereaderは不要です
KoukoMatsumoto

2017/12/22 00:17

わかりにくくて申し訳ございません。 filereaderのけんは調べて見ます。やりたいこととしては、 ・デフォルトのinput type=fileのデザインのボタンではなく、画像やテキストのクリックでファイルを選びたい ・非同期処理でflaskに通信しアップロードさせたい といった内容になります。 全文そのままコピーできないため、 ソースコードの差異が有るかもしれません。見直して見ます。 flask側でゼロバイトで保存されてしまうのは、jsの書き方が原因でしょうか・・・?
yambejp

2017/12/22 00:19

とりあえず私の提示したソースは試されましたか? 選択したファイルとおなじサイズのファイルが送られているとわかると思います
KoukoMatsumoto

2017/12/22 07:07

大変申し訳ございません、自己解決してしまいました。 ここに載せていないソースで、ファイルのサイズをseekで調査していたのですが、そちらでファイルポインタを戻していないのが原因のようでした。 ajaxに関しては問題がなかったようです。 お手数おかけしてこのような解決で心底申し訳ございません。
KoukoMatsumoto

2017/12/22 07:09

upload_file = request.files['image'] upload_file.seek(0, os.SEEK_END) app.logger.info(upload_file.tell()) upload_file.save(os.path.join('/tmp/images', 'image.png') のような処理になっておりまして、こちらで0バイトになってしまっていたようです・・・ 大変恐縮です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問