利用jQuery-file-upload在MVC中实现上传文件(未完成)

来源:互联网 发布:bestv百视通第三方软件 编辑:程序博客网 时间:2024/03/29 23:59

目的

利用jQuery-file-upload插件实现文件上传,并且文件上传后可列出文件的地址,可删除

前期准备

jQuery-file-upload

可在nuget中下载安装最新版本

前端

页面端如果只要实现基本功能,创建一个Form,在此处利用的Html.BeginForm(),并没有使用Ajax.BeginForm(),因为jQuery-file-upload在内部是自动实现ajax方法。
将该Form的id设为"fileuploadtemplate",作为选择器供JS使用。
@using (Html.BeginForm("_UploadFileTemplate", "Home",
FormMethod.Post, new { enctype = "multipart/form-data", id = "fileuploadtemplate" }))
{
@Html.AntiForgeryToken()
 <span class="btn btn-success fileinput-button">                <i class="glyphicon glyphicon-plus"></i>                <span>添加附件</span>                <input type="file" id="inputfileupload" name="uploadfiles" multiple> </span>
}



JS文件

如果仅实现简单的文件上传功能,直接调用即可,为提高界面美观,以及控制dropzone,可以通过设置Option参数。
$("#fileuploadtemplate").fileupload({        dataType: 'json'});


后端

public JsonResult _UploadFileTemplate(IEnumerable<HttpPostedFileBase> uploadfiles)        {            var jsonResult = new List<UploadFileResult>();                        foreach (var file in uploadfiles)            {                var resultTemp = new UploadFileResult();                if (file == null)                {                    resultTemp.error = "file is null";                }                else                {                    var webPath = GetSavedFilePath(file);                    resultTemp.url = webPath.Replace("\\", "/");                    resultTemp.name = file.FileName;                    resultTemp.size = file.ContentLength;                    resultTemp.thumbnailUrl = webPath.Replace("\\", "/");                    resultTemp.deleteUrl = webPath.Replace("\\", "/");                    resultTemp.deleteType = "DELETE";                }                jsonResult.Add(resultTemp);            }            return Json(jsonResult);        }


完整代码


0 0