Blueimp文件上传:如何删除文件? (MVC)

时间:2015-09-01 19:26:36

标签: asp.net asp.net-mvc asp.net-mvc-5 blueimp

我正在尝试将Blueimp File Uploader绑定到我的MVC 5解决方案中。我的上传工作如下:

<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br />
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">0% complete</span>
    </div>
</div>
<br />
<div class="file_name"></div>
<br />
<div class="file_type"></div>
<br />
<div class="file_size"></div>


    <!-- The container for the uploaded files -->
<div id="files" class="files"></div>

和javascript

 $(document).ready(function () {
        var Url = "@Url.Content("~/Advertise/UploadFiles")";

        $('#fileupload').fileupload({
            dataType: 'json',
            url: Url,
            autoUpload: true,
            done: function (e, data) {
               // $('.file_name').html(data.result.name);
               // $('.file_type').html(data.result.type);
               // $('.file_size').html(data.result.size);
            }
        }).on('fileuploadadd', function (e, data) {
            data.context = $('<div/>').appendTo('#files');
            $.each(data.files, function (index, file) {
                var node = $('<p/>')
                        .append('<img src="' + URL.createObjectURL(data.files[0]) + '" height="50" width="50"/>').append($('<span/>').text(file.name));
                if (!index) {
                    node
                        .append('<br>')
                    //.append(uploadButton.clone(true).data(data));
                }
                node.appendTo(data.context);
            });
        }).on('fileuploadprocessalways', function (e, data) {
            var index = data.index,
                file = data.files[index],
                node = $(data.context.children()[index]);
            if (file.preview) {
                node
                    .prepend('<br>')
                    .prepend(file.preview);
            }
            if (file.error) {
                node
                    .append('<br>')
                    .append($('<span class="text-danger"/>').text(file.error));
            }
            if (index + 1 === data.files.length) {
                data.context.find('button')
                    .text('Upload')
                    .prop('disabled', !!data.files.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }).on('fileuploaddone', function (e, data) {
            $.each(data.result.files, function (index, file) {
                if (file.url) {
                    var link = $('<a>')
                        .attr('target', '_blank')
                        .prop('href', file.url);
                    $(data.context.children()[index])
                        .wrap(link);
                } else if (file.error) {
                    var error = $('<span class="text-danger"/>').text(file.error);
                    $(data.context.children()[index])
                        .append('<br>')
                        .append(error);
                }
            });
        }).on('fileuploadfail', function (e, data) {
            $.each(data.files, function (index) {
                var error = $('<span class="text-danger"/>').text('File upload failed.');
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            });
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });

我上面没有测试过很多jQuery。但我正在研究如何删除上传的文件?我可以通过调用jQuery ajax帖子来做到这一点,但我认为Blueimp有一种原生的方式来做到这一点。但是我找不到任何关于它的文件?任何帮助赞赏。

0 个答案:

没有答案