Question

问题：

我有一个文件上传页面（下面的代码），其中有一个上传文件和文件的选项，当上传时触发请求/uploadFiles1并且它由烧瓶处理（下面的代码）之后触发一系列事件在文件上，在完成所有活动后，我想显示一条消息Success in the same page。但它没有显示。

flask_app.py

@app.route("/uploadFiles")
def index():
        return render_template('upload.htm') , 1
@app.route('/uploadFiles1', methods = ['GET', 'POST'])
def upload_file():
        if request.method == 'POST':

                f = request.files['file']
                if f:
                        filename = secure_filename(f.filename)
                        f.save( os.path.join(app.config['UPLOAD_FOLDER'], filename ))
                        copyfile(os.path.join(app.config['UPLOAD_FOLDER'],filename) ,os.path.join('/home/admin/Batch/Samples/', filename))
                        # Call the remote function
                        from paramiko import SSHClient
                        client = SSHClient()
                        client.load_system_host_keys()
                        client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
                        client.connect("192.168.90.90", username="nsadmin",password='something')
                        transport = client.get_transport()
                        #stdin , stdout , stderr =client.exec_command('sudo ls')
                        stdin, stdout, stderr = client.exec_command('sudo python /home/nsadmin/app.py')
                        print "stderr: ", stderr.readlines()
                        print "Output: ", stdout.readlines()
                        # Remove this file from /Batch/Samples/ Location
                        #os.remove(os.path.join('/home/admin/Batch/Samples/', filename))
                        print 'I came here'
                        msg = 'File upload Success'
                        logger.info('I came here with msg {}'.format(msg))
                        return render_template('upload.htm', msg=msg) , 1

的Upload.htm

<!DOCTYPE html>
<html>
<head>
<title>File Upload </title>
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

</head>
<body>

<h1>Upload Malware Here</h1>
<h3>
{% if msg %}
    {{ msg }} #empty page
  {% endif %}
</h3>
<div class="upload">
                        <h3>Select File</h3>
                <div class="login-form">
                        <form id="upload" method="POST" action="/uploadFiles1"  enctype="multipart/form-data">
                                <div id="drop">
                                <a>Upload</a>
                                <input type="file" name="file" />
                                </div>
                                <input type="submit" value="submit">


                                <ul>
                                <!-- The file uploads will be shown here -->
                                </ul>

                        </form>
                </div>

</div>
<!-- JavaScript Includes -->
                <script src="{{ url_for('static', filename='js/jquery.knob.js') }}"></script>
        <!-- JavaScript Includes -->

        <!-- jQuery File Upload Dependencies -->
                <script src="{{ url_for('static', filename='js/jquery.ui.widget.js') }}"></script>
                <script src="{{ url_for('static', filename='js/jquery.iframe-transport.js') }}"></script>
                <script src="{{ url_for('static', filename='js/jquery.fileupload.js') }}"></script>
        <!-- jQuery File Upload Dependencies -->

        <!-- Main JavaScript file -->
           <script src="{{ url_for('static', filename='js/script.js') }}"></script>
        <!-- Main JavaScript file -- >



</body>
</html>

脚本文件

root@corpus:/var/www/FlaskApp/FlaskApp# cat static/js/script.js
$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

我试过的解决方案：

我在html页面中创建了一个占位符，在完成所有处理之后，我再次使用msg来渲染页面。但是它没有使用msg重新编写。

任何建议都会有所帮助

更新：

响应正在填充，但页面未使用元素进行更新。

Answer 1

看起来您正在使用Javascript通过XHR上传文件，而不是使用浏览器执行完整的POST请求：

// Automatically upload the file once it is added to the queue
 var jqXHR = data.submit();

这意味着渲染的响应将被发送回您的Javascript，忽略它。

你有两个选择：

通过禁用Javascript上传并让用户提交完整表单来执行标准POST，在这种情况下，您的邮件应该正确呈现。
让Javascript检查是否成功并自行呈现消息。

在文件上传后使用渲染方式推送烧瓶调用时，页面无法呈现？

1 个答案: