html5 文件阅读器 - 我如何手动创建文件列表？

Posted 2023-05-08

【中文标题】html5 文件阅读器 - 我如何手动创建文件列表？

【英文标题】：html5 filereader - how can i manually create a file list?

【发布时间】：2014-03-28 06:51:36

【问题描述】：

我将编写一个带有垃圾桶图标的图片上传器。

如何使用 jQuery 为每个循环创建文件列表？

html5文件阅读器的标准代码工作：

function handleFileSelect(evt) 
    evt.stopPropagation();
    evt.preventDefault();
    files = evt.target.files || evt.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) 
        if (!f.type.match('image.*')) 
            continue;
        
        reader = new FileReader();
        // Closure to capture the file information.
        reader.onload = (function (theFile) 
            return function (e) 
                var img = new Image();
                img.onload = function () 
                    $('#output').append("<img data-rotate='270' src='" + e.target.result + "'>");
                
                img.src = e.target.result;
            ;
        )(f);
        //Read in the image file as a data URL.
        reader.readAsDataURL(f);
    

上传功能：

function upload_files() 
    //i need a new filelist with jquery $('#allpicturediv').each(function()
    //newfiles .....
    for (var i = 0, f; f = newfiles[i]; i++) 
        upload_file_now(f);
    


function upload_file_now(f) 
    //Do the actual uploading
    var XHR = new XMLHttpRequest();
    XHR.open('PUT', '...../upload.php', true);
    //Send the file details along with the request
    ..........
    XHR.send(f);

问题是，当用户删除图片时，文件列表是否不是最新的。

我想我需要一个脚本来创建一个新的文件列表，在 upload_files() 函数中。

如何解决这个问题？我已经头疼了。

【参考方案1】：

我创建了这段代码，它运行良好。

首先让我们创建一个小函数来确定所选文件的类型：

function openFile(file) 
    var extension = file.substr( (file.lastIndexOf('.') +1) ).toLowerCase();;
    switch(extension) 
        case 'jpg':
        case 'png':
        case 'gif':
            return 'image'; 
        break;                        
        case 'zip':
        case 'rar':
            return 'zip'; 
        break;
        case 'xls':
        case 'xlsx':
        case 'ppt':
        case 'pptx':
        case 'doc':
        case 'docx':
        case 'pst':
            return 'office'; 
        break;
        case 'pdf':
            return 'pdf';
        default:
            return 'other'; 
    
;

我们稍后会调用它。

然后是 de Input type 'file' 的事件，我几乎在每一行都添加了 cmets：

var url = window.URL || window.webkitURL; 
         $("div.upload input[type='file']").change(function()  // Every time we selected a file

            var input = $(this)[0];
            for (var i = 0; i < input.files.length; i++)  // We run a "for" loop for each element

                var thisClass = openFile(input.files[i].name); // We run the functione above to know the type of file


                if(thisClass != 'image')   // if there's not an image, we create anything else

                    // On thi example we create a <p> with the class of de element (PDF, XLSX, DOCX, Etc)
                    // Later with css we can create an icon based on the class
                    $(this).closest('.upload_container' ).find(".fileName").append('<p class="' + openFile(input.files[i].name) +'">'+input.files[i].name+'</p>');  
                else  // But if there's an image then lets do this:

                    var chosen = this.files[i]; //We select the file 
                    var image = new Image(); // Create an new image

                    var imageName = input.files[i].name; // Get the name of the file

                    image.onload = function()  // CREATE STEP 2.- When we creat the image do anything you want
                        //alert('Width:'+this.width +' Height:'+ this.height+' '+ Math.round(chosen.size/1024)+'KB');

                        var imageWidth = parseInt(this.width); 
                        var imageHeight = parseInt(this.height);


                        if(imageWidth < minWidth || imageHeight < minHeight) 

                            // We can send alerts or something for the size.

                            alert("La imágen " + imageName + " es más pequeña de lo requerido. Se requiere una imagen con un ancho mínimo de " + minWidth + "px y un alto mínimo de " + minHeight + "px." );
                        

                    ;

                     image.src = url.createObjectURL(chosen); // We are creating the image so go to CREATE STEP 2

                    // Now we create an div width the background of the image created before
                    $(this).closest('.upload_container' ).find(".fileName").append('<div class="thumbnailImage" style="background-image:url(' + image.src +');"></div>');                       
                

            

         );

希望对你有帮助！

【讨论】：

嗯你误会了吗？对不起我的英语。

【参考方案2】：

http://www.chatle.de/P1.jpg

这很好用。我将删除一张图片：

http://www.chatle.de/P2.jpg

然后点击上传（hochladen）。

问题是，第二张图片（来自 P1.jpg）还在文件列表中。文件列表具有“只读”模式。上传功能还需要一个新列表。 (upload_files()) （我会添加其他信息（图片注释，旋转编号...）

for (var i = 0, f; f = newfiles[i]; i++) 
    upload_file_now(f,myaddstrings);