Question

我在ASP.NET MVC应用程序中使用uploadify控件来上传用户选择的文件。我已将以下代码放在.js文件中：

$("#file_upload").uploadify({
    'uploader': '/Scripts/uploadify/uploadify.swf',
    'script': '/File/Upload',
    'cancelImg': '/Scripts/uploadify/cancel.png',
    'fileExt': '*.jpg;*.gif;*.png;*.bmp;*.htm;*.html;*.txt;*.zip',
    'fileDesc': '*.jpg;*.gif;*.png;*.bmp;*.htm;*.html;*.txt;*.zip',
    'auto': true,
    'multi': true,
    'sizeLimit': 1048576,
    'buttonText': 'Upload Files',

    'onComplete': function (event, queueID, fileObj, response, data) {
        alert(fileObj.name);       
    }
});

控制器具有以下代码：

    public class FileController : Controller
    {
        private static string uploadedHTMLFile = string.Empty;

        [HttpPost]
        public ActionResult Upload(HttpPostedFileBase fileData)
        {
//do something
            }
}

我遇到两个问题：

未调用控制器操作。
OnComplete上的警报触发，但上传的文件在触发该事件后从屏幕上消失。如何保留屏幕上传的文件列表？

{。{1}}在.cshtml文件中定义。

Answer 1

请尝试以下操作。

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Upload(HttpPostedFileBase fileData)
    {
        if (fileData != null && fileData.ContentLength > 0)
        {
            var appData = Server.MapPath("~/app_data");
            var filename = Path.Combine(appData, Path.GetFileName(fileData.FileName));
            fileData.SaveAs(filename);
        }
        return Json(true);
    }
}

Index.cshtml查看：

<input type="file" name="fileInput1" id="fileInput1" data-upload-url="@Url.Action("upload")" data-uploadify-root="@Url.Content("~/scripts")" />

Layout.cshtml脚本引用：

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/swfobject.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.uploadify.v2.1.4.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/myscript.js")"></script>

myscript.js：

$(function () {
    var fileInput = $('#fileInput1');
    var uploadifyRoot = fileInput.data('uploadify-root');
    var uploadUrl = fileInput.data('upload-url');
    fileInput.uploadify({
        'uploader': uploadifyRoot + '/uploadify.swf',
        'script': uploadUrl,
        'cancelImg': uploadifyRoot + '/cancel.png',
        'fileExt': '*.jpg;*.gif;*.png;*.bmp;*.htm;*.html;*.txt;*.zip',
        'fileDesc': '*.jpg;*.gif;*.png;*.bmp;*.htm;*.html;*.txt;*.zip',
        'auto': true,
        'multi': true,
        'sizeLimit': 1048576,
        'buttonText': 'Upload Files',
        'onComplete': function (event, queueID, fileObj, response, data) {
            alert(fileObj.name);
        }
    });
});

Answer 2

未调用控制器操作的原因是input type="file"的名称与控制器操作的参数不匹配。

在您的控制器中尝试这样：

[HttpPost]
public ActionResult Upload(HttpPostedFileBase file_upload)
{
}

您可以将输入类型的名称更改为fileData，也可以将参数名称更改为您的操作，如上所述。

我不确定我对第二个问题的解决方案是否解决了，但它可能对你有帮助。

尝试在uploadify选项中使用'removeCompleted': false，这样即使文件上传成功，它也会停留在页面上而不会消失。

希望这有帮助。

上传控制器操作和文件保留问题

2 个答案: