Question

我将用垃圾图标编写图像上传器。

如何为每个循环创建一个带有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()函数中创建一个新的文件列表。

怎么能解决这个问题？我已经头疼了。

Answer 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输入类型'file'的事件，我几乎在每一行都添加了注释：

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>');                       
                }

            }

         });

我希望它可以帮到你！

Answer 2

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

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

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

并点击上传（hochladen）。

问题是，第2张图片（来自P1.jpg）还在文件列表中。文件列表具有“只读”模式。还需要一个新的上传功能列表。（upload_files（））（我将添加其他信息（评论图片，旋转数字......）

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

html5 filereader - 如何手动创建文件列表？

2 个答案: