Question

我无法弄清楚如何获得多张图片的进度条。 PHP代码工作正常，并将图像上传到我的Dropbox帐户，但添加进度条形码后，只有第一个图像显示进度条，然后错误消息显示。出现错误后，第一个文件也无法上传。

错误消息：警告：在第30行的...... progressbar / processupload.php中为foreach（）提供的参数无效

我认为它与 var file = _（＆＃34; file1＆＃34;）中的ajax .file [0]有关。文件[0] ;这是我第一次处理ajax。有什么想法吗？

HTML＆amp; JS

<script>    
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "processupload.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

</head>

<body>
<form name="upload" id="upload" action="processupload.php" method="post" enctype="multipart/form-data">
    <p>File to upload : <input type ="file" name = "file1[]" id="file1" multiple="multiple" accept="image/*"></p><br />       
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

PHP processupload

<?php   
    // Include the Dropbox SDK libraries
    require_once "dropbox-sdk/Dropbox/autoload.php";
    use \Dropbox as dbx;

    // grant access
    $accessToken = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
    $dbxClient = new dbx\Client($accessToken, "PHP-Example/1.0");
    $accountInfo = $dbxClient->getAccountInfo();

    //set parameters
    $valid_formats = array("jpg", "png", "gif", "zip", "bmp", "psd","ai","pdf");
    $max_file_size = 1024*60000; //60000 kb/60mb
    $count = 0;

    $fileName = $_FILES["file1"]["name"]; // The file name
    $fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
    $fileType = $_FILES["file1"]["type"]; // The type of file it is
    $fileSize = $_FILES["file1"]["size"]; // File size in bytes
    $fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true

    //loop through each file
    foreach ($_FILES["file1"]["name"] as $f => $name){
        if ($_FILES["file1"]["error"][$f] == 4) {
            echo "error";
            continue; // Skip file if any error found
        }   
        if ($_FILES["file1"]["error"][$f] == 0) {              
            if ($_FILES["file1"]["size"][$f] > $max_file_size) {
                $message[] = "$name is too large!.";
                continue; // Skip large files
            }elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
                $message[] = "$name is not a valid format";
                continue; // Skip invalid file formats
            }
            else{ // No error found! Upload file to dropbox 
                echo "10";
                /* Copy file to dropbox */
                $f2 = fopen($_FILES["file1"]["tmp_name"][$f], "rb");
                echo "20";
                //get file name
                $target_file = basename($_FILES["file1"]["name"][$f]);
                //get file extension
                $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 

                $result = $dbxClient->uploadFile("/AEE1292838/101/" . $target_file, dbx\WriteMode::add(), $f2);
                fclose($f2);                    
                echo ($result[size]);               

                $count++; // Number of successfully uploaded file
            }
        }
    }
?>

上传多个图像，显示进度显示ajax和php

0 个答案: