Question

我正在尝试制作一个html5图像上传器，但html5在多次上传时遇到问题。

这是我使用的脚本：

function makeFileList() {
        var input = document.getElementById("filez");
        var ul = document.getElementById("file_wrap_list");
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }
        for (var i = 0; i < input.files.length; i++) {
            var j = i+1;
            var li = document.createElement("li");
            li.innerHTML = j+'. '+input.files[i].name;
            ul.appendChild(li);
        }
        if(!ul.hasChildNodes()) {
            var li = document.createElement("li");
            li.innerHTML = 'No Files Selected';
            ul.appendChild(li);
        }
    }

HTML标记：

<input type="file" name="photo[]" id="filez" multiple onchange="makeFileList();"/>

然后提交我上传并在mysql表中添加图像。我考虑过编写js脚本以便每次选择iamges时都会创建隐藏的输入并通常显示其名称，以便客户知道他们选择了什么。提交表格后，图片将被上传，但我不知道它是否会在实践中发挥作用，我的想法似乎有点奇怪。我想知道是否有人对如何更改js脚本有任何建议，以便每次用户点击并选择图像脚本以在阵列中注册图像。或者欢迎任何其他想法。

Answer 1

您对阵列的想法很好。然后问题是确保用户尚未选择文件，并允许他们删除他们之前选择的文件。困难的部分是可靠地比较文件。

I tweaked your code and managed to get it working here

// An array to store file references in
var files = [];

// Look in files to see if it's already in there
function alreadySelected( newFile ){
    var match = false;

    // We can't just use files.indexOf( newFile ), since JS can't test file equality
    files.forEach( function compareProperties( oldFile ){
        var key;
        var oldProp;
        var newProp;

        for ( key in newFile ){
            if( newFile.hasOwnProperty( key ) ){
                oldProp = oldFile[ key ];
                newProp = newFile[ key ];

                if( newProp !== oldProp ){
                    // The root of the problem: the same date will be a different date object.
                    if( newProp instanceof Date ){
                        if( newProp.getTime() !== oldProp.getTime() ){
                            return;
                        }
                    }
                    else {
                        return;
                    }
                }
            }
        }

        match = true;
    } );

    return match;
}

window.makeFileList = function makeFileList() {
    var input = document.getElementById("filez");
    var ol    = document.getElementById("file_wrap_list");

    Array.prototype.forEach.call( input.files, function processFile( file ){
        // If the user's already added this file to the list, move on to the next.
        if( alreadySelected( file ) ){
            return;
        }

        var li = document.createElement("li");
        // We'll also create an 'X' link for users to remove files from the list
        var a  = document.createElement("a");

        li.innerHTML = file.name;
        a.innerHTML  = "X";

        a.addEventListener( "click", function removeFile( clickEvent ){
            clickEvent.preventDefault();

            // Find the file in the array and remove it
            files.splice( files.indexOf( file ), 1  );
            ol.removeChild( li );
        }, false ) ;

        files.push( file );

        li.appendChild( a );
        ol.appendChild( li );
    } );

    // Reset the value. Normal file inputs won't trigger the change event if the value is the same,
    // but a user might add a file, delete it, then try to add it again.
    input.value = '';
};

Answer 2

我相信这个问题与我最近试图回答的另一个问题类似。我的解决方案的链接位于：HTML multiple file upload from different folders。

使用HTML和jQuery，我能够创建一个表单，您可以动态添加多个“浏览器”按钮。我还提供了一个用于处理数据服务器端的PHP解决方案！

从不同文件夹上传html5文件

2 个答案: