Javascript-图像上传预览-删除循环，使其仅提交单个文件

我在网上的某个地方（我不记得在哪里）找到了这个脚本，它工作得很好，可以在上传之前显示图像的预览。预览脚本适用于多个文件，但由于我也将数据保存到数据库中，因此需要将其限制为单个文件。这个脚本包含一个索引文件输入名称的循环，我很难用上载文件并保存数据的php脚本来定位它。因此，我需要删除循环，使其只处理单个文件，然后我可以给它一个“常规”名称并将其作为目标

<input type="file" name="files[]" class="file" id="files">
    <output id="list"></output>
    <script type="text/javascript">
        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object

            // 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();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>

功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；

---

谢谢

您应该能够为输入元素指定任何您想要的名称，并且代码应该仍然有效

有关文件属性的详细信息，请参见

var files=evt.target.files应始终为数组。如果确实要删除循环，请尝试以下操作

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // instead of looping. go straight for the first array item
    var f = files[0];
    // Only process image files.
    if (!f.type.match('image.*')) {
        return;
    }
    var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
    return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);
        };
    })(f);

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

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

功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//不要循环。直接进入第一个数组项
var f=文件[0]；
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
返回；
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；
不清楚您在找什么。脚本会自动遍历所有图像文件。您想传递一个文件名吗？是的，这就是我需要做的。我似乎无法获得上传文件并将数据保存到DB以识别文件输入的php脚本。它保存了除文件以外的所有内容。我不明白这个for循环是如何工作的。有人能解释一下吗？谢谢。另外，
escape（）
也不推荐使用。使用
encodeURIComponent（）
。如果您愿意，可以解释一下更改的一点吗？我看到你把“继续”改为“返回”，我不知道为什么，但没有它就不行。再次感谢！发生for循环的行已被删除。它现在正在访问文件数组中的第一个索引，并将其分配给“var f”。因为我们删除了for循环，所以continue不起作用，这就是我返回它的原因。