Question

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()根本不起作用。我猜输入：文件是只读的。

我如何解决这个问题？

Answer 1

您可以将input.files设置为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);
});

仅允许目录HTML5中的文件上载表单元素中的图像

1 个答案: