0

何が起こっているのかわからない。ファイルからAJAX経由でユーザーファイルをアップロードしようとしています.POSTをindex.html実行し、upload.phpファイルの短いURLコードをユーザーに返します.

私の場合、ユーザーがファイルをアップロードするとリンクが提供され、F5 を介してページ全体を更新せずに別のファイルをアップロードすると、スクリプトは以前のファイルと新しいファイルを再アップロードし、以前のファイルのさらに別のショートコードを作成しますおよび新しいファイルの新しいショート コード

なんらかの理由で、ユーザーに返されるリンクを含む実際の div は、新しいファイルがアップロードされても消えないため、ユーザーは古いファイルのコードと新しいファイルのコードを取得しますが、これはまったく必要ありません。

ファイルがアップロードされると、完了し、POST にはそれがなくなり、ユーザーが新しいファイルをアップロードすると、div には新しいファイルへのショートコードのみが含まれますが、古い新しいファイルへの 2 つの異なるコードを持つ 2 つの div はありません。

ここにjQueryコードがあります

(function () {
    var input = document.getElementById("images"), 
        formdata = false;

    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
            a    = document.createElement("a");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
        a.href = source;
    }   

    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }

    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "<div class='uploading'></div>"
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }

        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res;                    
                }
            });
        }
    }, false);
}());

cyogen.comでサイトをテストできます。短いリンクを取得したら、ファイルを 1 つアップロードしてから別のファイルをアップロードしてみてください。

4

1 に答える 1

1

質問のURLにアクセスしましたが、フォームで複数のファイルをアップロードできるオプションinputが実際に有効になっていることに気付きました。毎回1つのファイルのみをアップロードする場合は、このオプションを削除する必要があると思います。multiple

于 2012-12-29T18:05:26.833 に答える