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}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。