MVC 上传文件+预览

浏览数：26 / 时间：2015年06月09日

学习记录复习用

一、调用了Uploadify插件

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。（具体参数百度就是。）

二、上传文件的方法

namespace PM.Myjobweb.Controllers
{
    public class FileOperationsController : Controller
    {
        BLL.pc_attachment bll_attachment = new BLL.pc_attachment();
        //
        // GET: /FileOperations/
        /// <summary>
        /// 上传文件
        /// </summary>
        /// <param name="fileData"></param>
        /// <returns></returns>
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Upload(HttpPostedFileBase fileData)
        {
            if (fileData != null)
            {
                try
                {
                    // 文件上传后的保存路径
                    string filePath = Server.MapPath(Request["folder"] + "\\");
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
                    string fileExtension = Path.GetExtension(fileName); // 文件扩展名
                    string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称

                    string url = "/Content/JqueryUpload/upload/" + saveName;

                    fileData.SaveAs(filePath + saveName);
                    if (fileExtension == ".docx" || fileExtension == ".doc" || fileExtension == ".pdf" || fileExtension == ".xlsx")
                        url = "/Content/JqueryUpload/html/" + PM.Common.FilesToHtml.FileToHtml(filePath + saveName, TimeParser.ConvertDateTimeInt(DateTime.Now).ToString(), fileExtension.Substring(1));

                    FilesModel m_files = new FilesModel();
                    m_files.DesName = fileName;
                    m_files.FileExtension = fileExtension;
                    m_files.SaveName = saveName;
                    m_files.Att_Expansion2 = url;

                    Model.pc_attachment m_attachment = new Model.pc_attachment();
                    m_attachment.Att_Name = fileName;
                    m_attachment.Att_Type = fileExtension;
                    m_attachment.Att_Url = saveName;
                    m_attachment.Att_Expansion1 = DateTime.Now.ToString();
                    m_attachment.Att_Expansion2 = url;
                    int resultId = bll_attachment.Add(m_attachment);
                    if (resultId > 0)
                    {
                        m_files.ResultId = resultId;
                        return Json(new { code = 0, msg = m_files });
                    }
                    else
                    {
                        return Json(new { code = -1, msg = m_files });
                    }

                }
                catch (Exception ex)
                {
                    return Json(new { code = -1, Message = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }
            else
            {

                return Json(new { code = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);
            }
        }

    }

    public class FilesModel
    {
        public int ResultId { get; set; }
        public string FileExtension { get; set; }
        public string SaveName { get; set; }
        public string DesName { get; set; }
        public string Att_Expansion2 { get; set; }
    }
}

上传文件的方法

三、JS

<script type="text/javascript">
    $(document).ready(function () {
        $("#uploadify").uploadify({
            ‘uploader‘: ‘/Content/JqueryUpload/js/uploadify.swf‘,
            ‘script‘: ‘/FileOperations/Upload‘,
            ‘cancelImg‘: ‘/Content/JqueryUpload/js/cancel.png‘,
            ‘buttonText‘: ‘upload‘,
            ‘folder‘: ‘/Content/JqueryUpload/upload‘,
            ‘queueID‘: ‘fileQueue‘,
//            ‘hideButton‘:true,
            ‘multi‘: true,
            ‘auto‘: true,
            //‘wmode‘: ‘transparent‘,
            ‘onComplete‘: function (event, queueId, fileObj, response, data) {
                var obj = eval("(" + response + ")");
                var oldName = ‘‘;
                var newName = ‘‘;
                var fileType = ‘‘;
                var Att_Expansion2 = ‘‘;
                var id = ‘‘;
                switch (obj.msg.FileExtension) {
                    case ‘.docx‘:
                        fileType = ‘icon-word‘;
                        break;
                    case ‘.doc‘:
                        fileType = ‘icon-word‘;
                        break;
                    case ‘.pdf‘:
                        fileType = ‘icon-pdf‘;
                        break;
                    case ‘.xlsx‘:
                        fileType = ‘icon-excel‘;
                        break;
                    case ‘.jpg‘:
                        fileType = ‘icon-tupian‘;
                        break;
                    case ‘.ppt‘:
                        fileType = ‘icon-ppt‘;
                        break;
                    case ‘.txt‘:
                        fileType = ‘icon-txt‘;
                        break;
                }
                oldName = obj.msg.DesName;
                newName = obj.msg.SaveName;
                id = obj.msg.ResultId;
                Att_Expansion2 = obj.msg.Att_Expansion2;
                var liobj = ‘<li id="add" tag="‘ + id + ‘"><i class="icon-word"></i>"‘ + oldName + ‘"<a target="_blank" href=‘ + Att_Expansion2 + ‘>预览</a><a href="/Content/JqueryUpload/upload/‘ + newName + ‘">下载</a></li>‘;
                $(liobj).appendTo($(‘.annex-list‘));

            }
        });

    });

四、调用

<label>附件</label>
            <ul class="annex-list">
                <li> 
                    <input type="file" name="uploadify" id="uploadify" style=" visibility:hidden" /><div id="fileQueue">
                    </div>
                </li>
            </ul>