Question

我没什么问题。

这是我的HTML

<div class="row" style="margin-bottom: 10px;">
            <div class="col-xs-1">
                <span class="upload-excell btn btn-success" id="uploadExcellBtn"><i class="fa fa-upload"></i> Import Excel</span>
                <div class="progress hidden" id="progress">
                    <div id="progressbat" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0;">
                        0%
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <input class="form-control filter" type="search" title="filter" placeholder="Search...">
            </div>
            <div class="col-xs-7"></div>
        </div>
<form class="Upload-form hiddenfile" method="post" enctype="multipart/form-data" action='upload url'>
    <input type="hidden" name="csrf_token" value="<?php echo $this->session->csrf_token; ?>" />
    <input type="file" name="file" class="excel-file"/>
</form>

这是我的ajax

var $PROGRESS_BAR = document.getElementById('progressbat'),
progres = document.getElementById('progress');
$(document).on('submit', '.Upload-form', function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = Math.round(evt.loaded / evt.total * 100);
                            $PROGRESS_BAR.style.width = percentComplete + '%';
                            $PROGRESS_BAR.innerHTML = percentComplete + '%';
                        }
                    }, false);
                    return xhr;
                },
                type:'POST',
                url: $(this).attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                beforeSend: function(){
                    uploadExcellBtn.className = "upload-excell btn btn-success hidden";
                    progres.className = "progress";
                    $PROGRESS_BAR.style.width = '0%';
                    $PROGRESS_BAR.innerHTML = '0%';
                },
                success:function(){
                    $PROGRESS_BAR.style.width = '0%';
                    $PROGRESS_BAR.innerHTML = '0%';
                    $PROGRESS_BAR.className = "progress-bar progress-bar-success";
                },
                complete: function () {
                    var xhr2 = new XMLHttpRequest();
                    xhr2.open("GET", "new url", true);
                    xhr2.onerror = function() { console.log('[XHR] Fatal Error.'); };
                    xhr2.onreadystatechange = function() {
                        if (xhr2.readyState > 2){
                            var responseInfo = xhr2.responseText.replace(/}/g, '}/').split("/").clean(undefined);
                            for(var $i = 0; $i < responseInfo.length; $i++){
                                var parsedinfo = JSON.parse(responseInfo[$i]),
                                    load = parseInt(parsedinfo.loaded);
                                if(load > loaded){
                                    loaded = load;
                                    percentage = Math.round(load / parseInt(parsedinfo.total) * 100);
                                    $PROGRESS_BAR.style.width = percentage + '%';
                                    $PROGRESS_BAR.innerHTML = percentage + '%';
                                }
                            }
                        }
                        if (xhr2.readyState == 4){
                            percentage = 0;
                            $PROGRESS_BAR.style.width = '0%';
                            $PROGRESS_BAR.innerHTML = '0%';
                            $PROGRESS_BAR.className = "progress-bar progress-bar-danger";
                            progres.className = "progress hidden";
                            uploadExcellBtn.className = "upload-excell btn btn-success";
                            refresh();
                        }
                    };
                    xhr2.send();
                },
                error: function(data){
                    console.log("error");
                    console.log(data);
                }
            });
            return false;
        });

我认为有可能清理这段代码......正如你在第一篇文件上传中所理解的那样，完成之后我需要发送读取此文件的请求，它在服务器端读取得非常好，但我无法回复上传完成后我的进度条。

这是我上传文件的php函数

$excell = $_FILES["file"]["name"];
            $uploadedfile = $_FILES['file']['tmp_name'];
            if ($excell) {
                $filename = stripslashes($_FILES['file']['name']);
                $extension = $this->getExtension($filename);
                $extension = strtolower($extension);
                if ($extension == ("xlsx" || "xls")) {
                    $newname = $this->Conf->root_dir."/uploads/".Generate::string(5).".$extension";
                    $this->Session->new_file = $newname;
                    move_uploaded_file($uploadedfile, $newname);
                    echo true;
                } else {
                    echo ' It is not Excell ';
                }
            } else {
                echo ' error on upload ';
            }

此代码用于阅读

set_time_limit(0);
        ob_implicit_flush(true);
        ob_end_flush();
        $xlsx = @(new SimpleXLSX($this->Session->new_file));
        $data = $xlsx->rows();
        $totalitems = count($data);
        $lastkey = $totalitems - 1;
        $current = 0;
        foreach ($data as $key => $val) {
            $current++;
            if ($key == 0 || $key == $lastkey) continue;
            // here I`m inserting in tho database
            sleep(1);
            $response = array(
                'loaded' => $current,
                'total' => $totalitems
            );
            echo json_encode($response);
        }

        sleep(1);
        unlink($this->Session->new_file);
        unset($this->Session->new_file);
        $response = array(
            'loaded' => $totalitems,
            'total' => $totalitems
        );
        echo json_encode($response);

上传响应非常好但阅读反应不起作用......

Answer 1

我用jquery ajax解决了这个问题.. 用xhr参数...

用1 ajax发送2个请求

1 个答案: