1

こんにちは、みんな！

HTML5XMLHttprequestアップローダーに少し問題があります。

複数のファイル入力からFilereaderクラスでファイルを読み取り、その後、バイナリ文字列として一度に1つずつアップロードします。サーバーでは、入力ストリームのビットをキャッチし、それをtmpファイルなどに入れます。この部分は適切です。プログラムは正常に終了し、応答を送信します。ヘッダーにそれが表示されます（FireBugなど）。しかし、JSを使用すると、「onreadystatechange」の最後のみをキャッチします。

すべての回答が表示されません。なんで？誰かがこの問題を解決できれば、それは素晴らしいことです:)

同じjQueryとテンプレートが表示されます。心配しないでください：D

これはJSです：

function handleFileSelect(evt)
{
    var files = evt.target.files; // FileList object

    var todo = {
            progress:function(p){
                $("div#up_curr_state").width(p+"%");
                },

            success:function(r,i){

                $("#img"+i).attr("src",r);
                $("div#upload_state").remove();
                },

            error:function(e){
                alert("error:\n"+e);
                }
        };


    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();
        var row = $('ul#image_list li').length;
            row = row+i;
        // Closure to capture the file information.
        reader.onload = (function(theFile,s) {
            return function(e) {
            // Render thumbnail.
            $("span#prod_img_nopic").hide();
            $("div#prod_imgs").show();
            var li = document.createElement('li');
            li.className = "order_"+s+" active";
            li.innerHTML = ['<img class="thumb" id="img'+s+'" src="', e.target.result,
                                '" title="', escape(theFile.name), '"/><div id="upload_state"><div id="up_curr_state"></div>Status</div>'].join('');
            document.getElementById('image_list').insertBefore(li, null);
            };
        })(f,row);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);

        //upload the data
        //@param object fileInputId     input file id
        //@param int    fileIndex       index of fileInputId
        //@param string URL             url for xhr event
        //@param object todo            functions of progress, success xhr, error xhr
        //@param string method          method of xhr event-def: 'POST'

        var url = '{/literal}{$Conf.req_admin}{$SERVER_NAME}/{$ROOT_FILE}?mode={$_GET.mode}&action={$_GET.action}&addnew=product&imageupload={literal}'+f.type;

        upload(f, row, url, todo);
}

アップロード機能：

function upload(file, fileIndex, Url, todo, method)
 {
        if (!method) {
            var method = 'POST';
        }

        // take the file from the input

        var reader = new FileReader();
        reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
        reader.onloadend  = function(evt)
        {
                // create XHR instance
                xhr = new XMLHttpRequest();

                // send the file through POST
                xhr.open(method, Url, true);

                // make sure we have the sendAsBinary method on all browsers
                XMLHttpRequest.prototype.mySendAsBinary = function(text){
                    var data = new ArrayBuffer(text.length);
                    var ui8a = new Uint8Array(data, 0);
                    for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
                    var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)(); 
                    bb.append(data);
                    var blob = bb.getBlob();
                    this.send(blob);
                }

                // let's track upload progress
                var eventSource = xhr.upload || xhr;
                eventSource.addEventListener("progress", function(e) {
                    // get percentage of how much of the current file has been sent
                    var position = e.position || e.loaded;
                    var total = e.totalSize || e.total;
                    var percentage = Math.round((position/total)*100);
                    // here you should write your own code how you wish to proces this
                    todo.progress(percentage);        
                });

                // state change observer - we need to know when and if the file was successfully uploaded
                xhr.onreadystatechange = function()
                {  
                        if(xhr.status == 200 && xhr.readyState == 4)
                        {                                
                            // process success                               
                            resp=xhr.responseText;

                            todo.success(resp,fileIndex);
                        }else{
                            // process error
                            todo.error(resp);
                        }                            
                };

                // start sending
                xhr.mySendAsBinary(evt.target.result);
        };
   }

    }
}

とスターターイベント

document.getElementById('files').addEventListener('change', handleFileSelect, false);
4

1 に答える 1

3

それは非常に小さな間違いです：あなたはvarステートメントを追加するのを忘れました：

    // create XHR instance
    var xhr = new XMLHttpRequest();
//  ^^^ add this

readystatechangeあなたのようなハンドラー機能で

function() {  
    if (xhr.status == 200 && xhr.readyState == 4) {       
        resp=xhr.responseText; // also a missing variable declaration, btw
        todo.success(resp,fileIndex);
    } else {
        todo.error(resp);
    }                            
}

最新のxhrインスタンスのみがチェックされ、statusリクエストreadyStateが発生したときにイベントが発生しました。したがって、最後のxhrがイベント自体をトリガーした場合にのみ、成功関数が実行されます。

解決策：すべての変数宣言を修正します。これだけではないと思います（ただし、動作に大きな影響を与えます）。イベントハンドラーの現在のインスタンスへの参照としてではthisなく、を使用することもできます。xhrXMLHttpRequest

于 2012-08-03T22:16:01.590 に答える