异步上传文件插件AjaxFileUploader在Asp.net MVC中应用

1. 下载插件

异步上传插件AjaxFileUploader,下载地址:http://phpletter.com/DOWNLOAD 

选择上面的2.1版本,下载。

2. 服务端代码

在HomeController中添加一个方法:

        [HttpPost]
        public string UpLoad(HttpPostedFileBase file)
        {
       string message="";
if (file == null) { message = "没有文件!"; } var fileName = Path.Combine(Request.MapPath("~/UploadFiles"), Path.GetFileName(file.FileName)); try { file.SaveAs(fileName); message = "上传成功!"; } catch { message = "上传异常 !" + Err.Message; }
       return message; }

注意要添加引用 using System.IO;

3. 客户端Html代码:

<div>
    <input type="file" id="file" name="file" />
    <img src="../images/loading.gif" width="20px" height="20px" id="loading" style="display: none;">
    <span id="mydiv" style="color: green;"></span>
    <br />
    <input type="button" value="上传" onclick="ajaxFileUploads();">
</div>
<script type="text/javascript">
    function ajaxFileUploads() {
        //starting setting some animation when the ajax starts and completes
        $("#loading").ajaxStart(function () {
            $(this).show();
        }).ajaxComplete(function () {
            $(this).hide();
        });
        $.ajaxFileUpload({
                url: '/home/UpLoad',
                secureuri: false,
                fileElementId: 'file',
                dataType: 'text',
                success: function (data, status) {
            alert(data);
                },
                error: function (data, status, e) {
                    alert(e);
                }
            }
        )
        return false;
    }
</script>

在客户端要添加 ajaxfileupload.js、ajaxfileupload.css、loading.gif 这三个文件。

另外要在更目录下面增加一个文件夹UploadFiles。

posted @ 2013-01-06 15:36  liquanchun  阅读(398)  评论(1编辑  收藏  举报