Question

我是jquery的新手，我正在玩this插件。我正在使用它与asp.net，我希望得到的文件数量下降。我尝试了一下但未能得到。有什么想法吗？

这是script.js的代码：

$(function () {

var dropbox = $('#dropbox'),
    message = $('.message', dropbox);

dropbox.filedrop({
    paramname: 'pic',
    maxfiles: 100,
    maxfilesize: 100,
    //url: '/Uploader.asmx/Upload',
    url: '/Default.aspx',

    uploadFinished: function (i, file, response) {
        $.data(file).addClass('done');
        var count = file.size;
        alert(count);
    },

    error: function (err, file) {
        switch (err) {
            case 'BrowserNotSupported':
                showMessage('Your browser does not support HTML5 file uploads!');
                break;
            case 'TooManyFiles':
                alert('Too many files! Please select 5 at most! (configurable)');
                break;
            case 'FileTooLarge':
                alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
                break;
            default:
                break;
        }
    },

    //Called before each upload is started
    // beforeEach: function (file) {
    //if (!file.type.match(/^image\//)) {
    //alert('Only images are allowed!');
    //   alert(file.name);
    // Returning false will cause the
    // file to be rejected
    //   return true;
    // }
    //},

    uploadStarted: function (i, file, len) {
        createImage(file);

    },
    progressUpdated: function (i, file, progress) {
        $.data(file).find('.progress').width(progress);
    }

});

var template = '<div class="preview">' +
                    '<span class="imageHolder">' +
                        '<img style="" />' +
                        '<p class="background: rgba(0, 0, 0, 0.75);"></p>' +
                        '<span class="uploaded"></span>' + // background: rgba(0, 0, 0, 0.75);
                    '</span>' +
                    '<div class="progressHolder">' +
                        '<div class="progress"></div>' +
                    '</div>' +
                '</div>';


function createImage(file) {

    var preview = $(template),
        image = $('img', preview),
        paragraph = $('p', preview);

    var reader = new FileReader();

    image.width = 100;
    image.height = 100;

    reader.onload = function (e) {

        // e.target.result holds the DataURL which
        // can be used as a source of the image:
        //alert(e.target.result);
        //            $('p#filename').removeAttr('id');
        //            $('p').attr('id', 'filename' + num + '');
        //            $('p#filename').text(file.name);
        paragraph.attr('id', 'filename').text(file.name);
        image.attr('src', '../assets/img/fileicon.png');
        num = num + 1;
    };

    // Reading the file as a DataURL. When finished,
    // this will trigger the onload function above:
    reader.readAsDataURL(file);

    message.hide();
    preview.appendTo(dropbox);

    // Associating a preview container
    // with the file, using jQuery's $.data():

    $.data(file, preview);
}

function showMessage(msg) {
    message.html(msg);
}

}）;

Answer 1

它在输入元素中。我有一个在变化事件中使用它的小提琴，在这种情况下它在event.target.files中。

编辑：应该包括小提琴：http://jsfiddle.net/jorgthuijls/uh95y/3/通过附加PDF来试试。

此处的相关代码。这会循环遍历文件并创建＆＃34;预览＆＃34; PDF的方框，但你也可以算一下。下面的files是一个数组。

var filesInput = document.getElementById("files");

filesInput.addEventListener("change", function (event) {

    var files = event.target.files; //FileList object
    var output = document.getElementById("result");

    for (var i = 0; i < files.length; i++) {
        var file = files[i];

        var reader = new FileReader();

        reader.addEventListener("load", function (event) {

            //stick some rubbish here to check the type of 
            //file loaded and adjust "type" below. See the 
            // 'reader' object, it has all that.

            var div = document.createElement("div");
            div.innerHTML
                = '<object data="' 
                + reader.result 
                + '" type="application/pdf">' 
                + '<embed src="' 
                + reader.result 
                + '" type="application/pdf" />' 
                + '</object>';
                output.insertBefore(div, null);

        });

        //Read the image
        reader.readAsDataURL(file);
    }
});

获取html5文件上传中丢弃的文件数

1 个答案: