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する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 に答える