Question

我想做的是以下几点：

让用户选择多个图像（逐个或一起）。
用户选择后立即预览图像。
让用户取消选择他的选择。
最后，点击“提交”按钮，仅将选定的图像复制到某个位置。
例如 - 打开www.twitter.com并在发布推文时选择图片。

我正在考虑的方法是：我可以多次使用input type = file来创建图像数组。并在用户取消选择特定文件时使值为null。这就是我在做的事情：

for( i = 0; i < input.files.length ; i++){
        if (input.files && input.files[i]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                //append a div with an image of src = e.target.result
            };
            reader.readAsDataURL(input.files[i]);
        }
    }

这是做什么的..一旦我选择多个图像，它就会立即读取并显示所有图像。但这是一次性选择..我想当用户第二次选择图像时......他们应该附加到数组中的先前图像。所以我可以提交所有这些。是的..从中间去除图像。

我面临的问题是：

如果用户输入多个文件2次或更多次，该怎么办？每个新时间都将清除上一个输入字段，因此在提交单个字段时，我只会获取存储的最新文件。
当用户取消选择图像时，如何从阵列中间删除图像？

我希望你能得到我的疑问。他们能解决这个问题或展示新方法的任何天才？基本上，我想要一些相同的东西在Twitter上的推文上传图像。

PS - 这是一个非常真实的问题，回答它可以帮助很多人。所以最好不要贬低这一点。

Answer 1

得到了.. 我使用了多个输入，这些输入是在先前的输入onChange函数上动态生成的。：）

从输入类型文件中选择并删除多个文件

1 个答案: