Question

我有一个表单，它将json文件和POST带到服务器端进程。这是一个漫长的过程，我想通过多条消息实时向用户反馈它。

我有什么选择？

此过程可能需要10-15分钟或更长时间。我不是在寻找答案“AJAX”。还有更多的东西。

这是我获得的表格：

    <form method="POST" accept-charset="UTF-8" class="smart-form" id="import-course" enctype="multipart/form-data">
        <fieldset>
            <div class="row">
                <section class="col col-md-12">
                    <label class="input input-file">
                        <input class="button" name="import" type="file">
                    </label>
                </section>
            </div>
        </fieldset>
        <footer>
            <button class="btn btn-primary" id="submit-import-file" type="button">Save</button>
            <a onclick="history.back();" class="btn btn-default">Cancel</a>
        </footer>
     </form>

这是我的ajax：

$(document).ready(function(){
        $("#submit-import-file").on('click',function(){
            console.log('click');
            $('#import-course').hide();
            var formData = new FormData($('#import-course')[0]);
            $.ajax({
                url: '{{URL::route("courses.import")}}',  //Server script to process data
                type: 'POST',
                xhr: function() {  // Custom XMLHttpRequest
                    var myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // Check if upload property exists
                        myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
                    }
                    return myXhr;
                },
                //Ajax events
                success: function(data){
                    console.log(data);
                },
                // Form data
                data: formData,
                //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false
            });
        });
    });

function progressHandlingFunction(e){
    console.log(e);
}

这是我的服务器端注意的评论。

$errors = 0;
$file = Input::file('import');
$fileName = $file->getClientOriginalName();
$destinationPath = app_path()."/storage/files/";
$file->move($destinationPath, $fileName);
$course = json_decode(File::get($destinationPath.$fileName));
if(!File::isDirectory($destinationPath.$course->code)){
    File::makeDirectory($destinationPath.$course->code,0777,true,true);
    //message back directory created
}
foreach($course->file as $file){
    if(FileManger->processfile($file)){
        //message back $file->name imported
    }else{
       //message back error importing $file->name
    }
}
return "import complete";

所以现在..如何在此过程中将评论区域发送回用户。不是之后。

Answer 1

您应该使用Ajax将数据发布到php页面而不刷新。以下代码将显示＆＃34;正在加载＆＃34;直到ajax呼叫完成。你可以使用gif或其他东西。进度条/百分比完成比较困难，但您可以将此答案作为参考。 PHP Ajax Upload Progress Bar

$.ajax({
  url: "domain.com/url",
  type: "POST", 
  data: data, 
  cache: false,
  beforeSend: function() {
    $('#response').html("Loading");
  },
  success: function(data) {
    $('#response').html(data);
  }
}

Answer 2

您仍然可以使用jquery进度条。将处理的进度写入UI，并根据处理的进度计算某种形式的百分比。那当然假设当然有不止一步的处理......！进度条一步到0到100％并不是非常有用。

POST处理时如何响应用户？

2 个答案: