从不同文件夹上载html5文件

我正在尝试制作一个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);
        }
    }

函数makeFileList（）{
var input=document.getElementById（“filez”）；
var ul=document.getElementById（“文件包装列表”）；
while（ul.hasChildNodes（））{
ul.removeChild（ul.firstChild）；
}
对于（var i=0；i

HTML标记：

---

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

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

---

我相信这个问题与我最近试图回答的另一个问题类似。我的解决方案的链接位于此处：

---

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

您的脚本在客户端工作得非常好，现在我正在尝试使其在服务器端工作，因为由于某种原因，当我提交表单时，服务器端的image post数据变为空，我尝试了console.log（文件），它给出了数组。但是我认为问题可能是window.makeFileList，因为它发送数组not list filelist我发现了问题，最后一行：input.value=''；始终发送文件的空数组数据。我删除了它，现在它工作了。但必须有一个解决办法，删除它不是一个解决方案，有什么想法吗？您最初的问题是文件输入无法从多个文件夹中选择文件，这就是为什么我们要将文件添加到数组中。您不想发送文件输入的内容，因为它只能从一个文件夹中获取文件。相反，您希望发送文件数组中的每个文件。你自己提出了阵列的想法！我访问了你的链接，尽管它在JSFIDLE上运行得很好，但只有在我删除第15行的“hasOwnProperty”复选框时，它才对我有效（在我的代码中）。由于某些原因，hasOwnProperty检查的计算结果总是为false，因此我一次不能添加多个文件。

// 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 = '';
};