如何在上传之前一个接一个地读取图像

时间:2016-08-19 15:28:07

标签: javascript jquery html5

我有html:

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

我想用JavaScript阅读多个文件 - 新的FileReader() 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);

    });

上面的代码工作正常,因为我编辑了问题并替换了其他人使用的答案。

谢谢

0 个答案:

没有答案