0

我已经在我的 MVC 应用程序中实现了 plupload。一切顺利，但在视野中。

我决定把它移到它自己的文件中：

在此处输入图像描述

它不再工作，因为它找不到 plupload.flash.swf 或 plupload.silverlight.xap。

这是 pluploadimplementation.js 的内容：

$(function () {
    $("#dialog").dialog({

        autoOpen: false,
        buttons: {
            "OK": function () {
                var invoiceComment = {
                    InvoiceId: invoiceId,
                    Comment: $('#comment').val()
                };
                $.post('/Invoice/AddComment', invoiceComment);
                $(this).dialog('close');
            }
        }
    });
    $(".btncomment").click(function () {
        invoiceId = $(this).attr("data-invoiceid");
        $("#dialog").dialog('open');
    });

    var filelist = $('#filelist');
    var pickfiles = $('#pickfiles');
    var uploadfiles = $('#uploadfiles');

    var uploader = new plupload.Uploader({
        runtimes: 'flash,silverlight,html5,html4',
        //runtimes: 'silverlight,html5, html4',
        //runtimes: 'html5,html4',
        //runtimes: 'html4',
        browse_button: pickfiles.attr('id'),
        container: 'container',
        max_file_size: '10mb',
        //chunk_size: '1mb',
        multi_selection: false,
        multipart: true,
        urlstream_upload: true,
        url: '@Url.Action("Upload", "Invoice")',
        flash_swf_url: '@Url.Content("~/Scripts/plupload/js/plupload.flash.swf")',
        silverlight_xap_url: '@Url.Content("~/Scripts/plupload/js/plupload.silverlight.xap")',
        filters: [
            { title: "Image Files", extensions: "jpg,gif,png,pdf" },
            { title: "Zip Files", extensions: "zip" },
            { title: "Office Files", extensions: "doc,docx,xls,xlsx" }
            ],
        resize: { width: 320, height: 240, quality: 90 }
    });

    uploader.bind('Init', function (up, params) {
        showpickfiles(true);
    });

    uploadfiles.click(function (e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.init();

    uploader.bind('FilesAdded', function (up, files) {
        filelist.empty();

        $.each(files, function (i, file) {
            filelist.append('<div id="' + file.id + '">' + file.name +
                ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                '<a href="#" id="cancel' + file.id + '" class="cancel"> [Cancel]</a>');

            //Bind cancel click event
            $('#cancel' + file.id).click(function () {
                $('#' + file.id).remove();
                showpickfiles(true);
                uploader.removeFile(file);
                uploader.refresh();
            });

            showpickfiles(false);
        });

        up.refresh(); // Reposition Flash/Silverlight
    })

    uploader.bind('UploadProgress', function (up, file) {
        $('#' + file.id + " b").html(file.percent + "%");
    });

    uploader.bind('Error', function (up, err) {
        if (err.code == -600) {
            filelist.append('<div style="color: #CC0000;">Error - File size is greater than 10MB'
            + (err.file ? ', File: ' + err.file.name : "") + '</div>');
        }
        else {
            filelist.append('<div style="color: #CC0000;">Error - ' + err.message
                + (err.file ? ', File: ' + err.file.name : "") + '</div>');
        }

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function (up, file) {
        $('#' + file.id + " b").html("100%");
        $('#cancel' + file.id).remove();
        pickfiles.html('[Replace Invoice]');
        showpickfiles(true);
        up.refresh();
    });

    var showpickfiles = function (show) {
        if (show) {
            pickfiles.show();
            uploadfiles.hide();
        } else {
            pickfiles.hide();
            uploadfiles.show();
        }
    }
});

我是否错误地指定了这些文件的位置？

4

1 回答 1

0

我是否错误地指定了这些文件的位置？

是的，你有。您@Url.Content在静态 javascript 文件中使用了服务器端助手。您只能在视图内部使用服务器端构造。

有几种可能性：

  • 在某些视图的内联声明中移动uploader包含所有设置和路径的 javascript 变量，<script>以便 url 助手工作。

  • #uploadfiles在DOM 元素上使用 HTML5 data-* 属性：

    <div id="uploadfiles" data-swfurl="@Url.Content("~/Scripts/plupload/js/plupload.flash.swf")" data-xapurl="@Url.Content("~/Scripts/plupload/js/plupload.silverlight.xap")">Upload</div>

    进而：

    var uploadfiles = $('#uploadfiles');

var uploader = new plupload.Uploader({
    runtimes: 'flash,silverlight,html5,html4',
    //runtimes: 'silverlight,html5, html4',
    //runtimes: 'html5,html4',
    //runtimes: 'html4',
    browse_button: pickfiles.attr('id'),
    container: 'container',
    max_file_size: '10mb',
    //chunk_size: '1mb',
    multi_selection: false,
    multipart: true,
    urlstream_upload: true,
    url: '@Url.Action("Upload", "Invoice")',
    flash_swf_url: uploadfiles.data('swfurl'),
    silverlight_xap_url: uploadfiles.data('xapurl'),
    filters: [
        { title: "Image Files", extensions: "jpg,gif,png,pdf" },
        { title: "Zip Files", extensions: "zip" },
        { title: "Office Files", extensions: "doc,docx,xls,xlsx" }
        ],
    resize: { width: 320, height: 240, quality: 90 }
});
于 2011-12-09T08:05:14.447 回答