0

HTML 代码

<input  type="file" accept="image/*" multiple webkitdirectory mozdirectory msdirectory odirectory directory id="fileURL"/>

Javascript代码：

var files, 
file, 
extension,
sum,
input = document.getElementById("fileURL"),
output = document.getElementById("fileOutput"),
holder = document.getElementById("fileHolder")
sizeShow = document.getElementById("filesSize");

input.addEventListener("change", function (e) {

    files = e.target.files;
    output.innerHTML = "";
    sum = 0;
    for (var i = 0, len = files.length; i < len; i++) {
        file = files[i];
        extension = file.name.split(".").pop();
        if(extension=="jpg"||extension=="png"){
            var size = Math.floor(file.size/1024 * 100)/100;
            sum = size+sum;
            output.innerHTML += "<li class='type-" + extension + "'>"+file.webkitRelativePath + file.name + " (" +  size + "KB)</li>";
        }else{
           file.remove();
        }
    }
    if(sum<1024*1024){
        sizeShow.innerHTML = Math.floor(sum/1024*100)/100 + " MB";
    }else if(sum>1024*1024){
        sizeShow.innerHTML = Math.floor(sum/1024*1024*100)/100 + " GB";
    }
}, false);

我如何只获取文件上传中的图像？accept="image/*"不适用于目录。

这确实有效，但该语句file.remove()根本不起作用。我猜 input:file 是只读的。

我该如何解决这个问题？

4

1 回答 1

1

您可以设置input.files为 a FileList（例如通过拖放获得），但您不能创建/修改FileList. 因此，您不能将输入文件修改为仅包含图像。

但是，您可以做的是手动上传（通过 ajax），并且只发送类型以"image/". 请参阅http://jsfiddle.net/WM6Sh/1/。

$("form").on("submit", function(e) {
    e.preventDefault();

    var files = $(this).find("input").prop("files");
    var images = $.grep(files, function(file) {
        return file.type.indexOf("image/") === 0;  // filter out images
    });

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/", true);

    $(xhr).on("readystatechange", function(e) {
        if(xhr.readyState === 4) {
            console.log("Done");
        }
    });

    var data = new FormData();
    $.each(images, function(i) {
        data.append(i, this);  // append each image file to the data to be sent
    });

    console.log(
        "Sending %d images instead of all %d files...",
        images.length,
        files.length
    );
    xhr.send(data);
});
于 2012-11-25T16:47:07.033 回答