0

FileReader を使用して画像を表示し、FormData を使用して ajax 経由で送信する複数のファイルをサーバーに送信するコードがあります。

私のコードは機能しますが、問題は複数の進行状況バーを表示することです。ファイルを 1 つだけ選択すると、機能します。

しかし、複数のファイルを選択すると、最後の進行状況バーにすべてのファイルの進行状況が表示されます。

誰でも助けることができますか？

(function () {
var input = document.getElementById("images")

function showUploadedItem (file, id) {

    var reader = new FileReader();
    reader.onload = (function(theFile) {
            return function(e) {
                var template = '<li>'+
                                    '<img src="'+e.target.result+'">'+
                                    '<br />'+
                                    '<progress min="0" max="100" value="0" id="'+id+'"></progress>'+
                               '</li>';     
                $("#image-list").append(template);
            };
    })(file);

    reader.readAsDataURL(file);     
}   

input.addEventListener("change", function (evt) {

    for (var i=0, j=this.files.length; i<j; i++) {
        file = this.files[i];

        formdata = new FormData();          
        formdata.append("images[]", file);

        var xhr = new XMLHttpRequest();
            xhr.id = "progress_" + Math.floor((Math.random() * 100000));
            xhr.addEventListener("loadstart", function(e){
                showUploadedItem(file, xhr.id);
            });/*           
            xhr.addEventListener('progress', function(e) {

            }, false);*/
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                $("#" + xhr.id).attr('value',  Math.floor((e.loaded / e.total) * 100) )
            };
            /*xhr.onreadystatechange = function(e) {
                if ( 4 == this.readyState ) {
                    console.log(['xhr upload complete', e]);
                }
            };*/
            xhr.open('post', 'upload.php', true);
            xhr.send(formdata);

    }

}, false);}());

私のPHPコード:

foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}} echo "<h2>Successfully</h2>";

私のhtml;

    <div id="main">
    <div style="padding-bottom:10px">
        <input type="file" name="images" id="images" multiple />
    </div>

    <ul id="image-list"></ul>
    <br style="clear:both">
</div>

4

1 に答える 1

0

閉鎖の問題があります。イベント コールバックで現在の XMLHttpRequest オブジェクトを参照するthis代わりに使用します。xhr

function(e){
    showUploadedItem(file, this.id);
});
function(e) {
    var done = e.position || e.loaded, total = e.totalSize || e.total;
    $("#" + this.id).attr('value',  Math.floor((e.loaded / e.total) * 100) )
}
于 2013-05-28T02:08:37.607 に答える