Javascript 如何在上传前逐个读取图像

我有html：

<!--multiple is set to allow multiple files to be selected-->
<input type="file" name="file"  class='uf' multiple />

我想用JavaScript读取多个文件-newFileReader（）API:

我编辑了我的问题和答案：

// setup reader function
    function readmultiplefile(files, i) {
    var file    = files[i];
    var reader  = new FileReader();
    reader.onload = function(e){
                loaded(e, files, i);
            };
    reader.readAsDataURL(file);
    }

    function loaded(e, files, i) {

    // get file content  
     var dataurl = e.target.result;
    //html content function //custom HTML content
    var content         = "<div class='readcontent'><span class='rf' title='Remove'><button type='button'><i class='fa fa-times'></i></button></span><img src='"+ dataurl +"' class='uimage' /></div>";


    //grab the element and append content
    var readfile = $("#readfile");
    readfile.append(content);

    // Continue to read  file if multiple
    if (i < files.length - 1) {
     // Load the next file
    readmultiplefile(files, i+1);
    }
    }



    //Call readmultiplefile function on a change state of input file
    $(document).on('change','.uf',function(){
        //read file
        readmultiplefile(this.files, 0);

    });

//设置读取器函数
函数readmultiplefile（文件，i）{
var file=files[i]；
var reader=new FileReader（）；
reader.onload=函数（e）{
加载（e、文件、i）；
};
reader.readAsDataURL（文件）；
}
已加载函数（e、文件、i）{
//获取文件内容
var dataurl=e.target.result；
//html内容函数//自定义html内容
var-content=“”；
//抓取元素并附加内容
var readfile=$（“#readfile”）；
readfile.append（内容）；
//如果有多个文件，则继续读取该文件
if（i

上面的代码运行良好，因为我已经编辑了问题并替换了答案供其他人使用

---

谢谢你

有一个额外的结束标记，不知道这是不是因为有一个匹配的开始标记没有包含在你的代码中，或者是你的

阅读器中的内容。readAsDataURL

不在循环中好吧，现在我把它放在循环中，htmlcontent函数会附加所选文件的数量，但只读取最后一个文件。有什么好主意吗？我想reader.readAsDataURL没有读完这个文件，然后它会再次循环