FineUploader 学习笔记

FineUploader既是开源的又是收费的,这个没搞懂。

先看效果:

FineUploader 学习笔记

.....

FineUploader 学习笔记

很清爽。

FineUploader 学习笔记

FineUploader 学习笔记

FineUploader 学习笔记

FineUploader 学习笔记

成功和失败很清楚。

从网上找到了这个插件的几个文件:

  1.  fineuploader-4.1.0.min.css
  2.  jquery.fineuploader-4.1.0.min.js
  3.  loading.gif
  4.  processing.gif

后2个是动画效果。

环境:

ASP.NET MVC 4

使用到的文件:

  1.  fineuploader-4.1.0.min.css
  2.  jquery.fineuploader-4.1.0.min.js
  3.  loading.gif
  4.  processing.gif
  5. jquery-1.8.3.min.js

View

FineUploader 学习笔记
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="~/Scripts/FineUploader/jquery.fineuploader-4.1.0.min.js" type="text/javascript"></script>
    <link href="~/Scripts/FineUploader/fineuploader-4.1.0.min.css" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            var manualuploader = $(#manual-fine-uploader).fineUploader({
                request: {
                    endpoint: /FineUploader/Index
                },
                validation: {
                    //itemLimit: 3,
                    allowedExtensions: [jpg, xlsx,xls, txt],
                    sizeLimit: 10240000 // 10M
                },
                template: "qq-template-manual-noedit",
                autoUpload: false,

                callbacks:
                {
                    //文件开始提交(在浏览窗口中选择的每个文件都会触发该事件)
                    //id:文件在队列中的索引
                    //fileName:文件名称
                    onSubmit: function (id, fileName) {
                        //alert(‘this is  onSubmit Function,your selected is:‘ + fileName);
                        //只能上传规定的文件
                        var name = fileName.split(.)[0];//不带后缀名
                        switch (name) {
                            case Member:
                                break;
                            case Guestbook:
                                break;
                            default:
                                alert(请选择正确的文件上传!);
                                return false;
                                break;                              
                        }
                    },
                    //文件开始上传
                    onUpload: function (id, fileName) {
                        $(#file- + id).addClass(alert-info)
                                        .html(<img src="../Scripts/FineUploader/loading.gif"  /> alt="Initializing. Please hold.">  +
                                        Initializing  +
                                         + fileName + );
                        $(#progress).show();//显示进度动画
                    },
                    //文件上传失败
                    onError: function (event, id, name, errorReason, xhrOrXdr) {
                        //alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
                        //$(‘#message‘).append(‘上传文件失败:‘ + id, ‘<br/>‘ + name,+‘<br/>‘+ errorReason.response + ‘<br/>‘);
                    },
                    //文件上传结束
                    onComplete: function (id, fileName, responseJSON) {
                        //alert(‘This is onComplete function.‘);
                        //alert("complete name:"+responseJSON.name);//responseJSON就是controller传来的return Json
                        $(#message).append(responseJSON.msg);
                        $(#progress).hide();//隐藏进度动画   
                        //清除已上传队列
                        $(.qq-upload-list).hide();
                        //$(‘#manual-fine-uploader‘).fineUploader(‘reset‘);//(这个倒是清除了,但是返回的信息$(‘#message‘)里只能保留一条。)                       
                    }
                }
            });

            $(#triggerUpload).click(function () {
                manualuploader.fineUploader(uploadStoredFiles);
            });
        });
    </script>
    <script type="text/template" id="qq-template-manual-noedit">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>选择文件</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    @*<div class="qq-progress-bar-container-selector">
                        <div class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>*@
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">取消</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>
    <style type="text/css">
        .btn {
            background-color: #F87436;
            background-image: -moz-linear-gradient(center top, #F88D5A, #E65C47);
            color: #FFFFFF;
            text-shadow: none;
            width: 93px;
            text-align: center;
            cursor: pointer;
            padding: 6px;
        }

        #message {
            margin-top: 1px;
        }

            #message p {
                margin: 0px;
                padding: 9px;
                color: white;
            }
    </style>
</head>
<body>
    <!-- Fine Uploader DOM Element -->
    <div id="manual-fine-uploader"></div>
    <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
        开始上传
    </div>
    <img id="progress" src="../Scripts/FineUploader/loading.gif" style="display: none;" />
    <div id="message"></div>
</body>
</html>
FineUploader 学习笔记

这里使用了js的模板<script type="text/template" id="qq-template-manual-noedit">

Controller

FineUploader 学习笔记
     public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(HttpPostedFileBase qqfile)//qqfile是个固定的名称!
        {
            string msg = "";
            if (qqfile != null && qqfile.ContentLength > 0)
            {
                var fileNameWithExtension = Path.GetFileName(qqfile.FileName);
                var fileName = Path.GetFileNameWithoutExtension(qqfile.FileName);
                var path = Path.Combine(Server.MapPath("~/Uploads"), fileNameWithExtension);

                try
                {
                    if (System.IO.File.Exists(path))
                        System.IO.File.Delete(path);
                    qqfile.SaveAs(path);

                    //写入数据库
                    string tbName = "";
                    List<string> columnMapping = null;
                    ImportAndExport.MappingColumn(fileName, out tbName, out columnMapping);
                    ImportAndExport.ImportExcel(path, tbName, columnMapping);
                    System.IO.File.Delete(path);
                    msg = "<p style=‘background-color:#5DA30C‘>写入成功: " + fileName + "</p>";
                }
                catch (Exception ex)
                {
                    System.IO.File.Delete(path);
                    msg = "<p style=‘background-color:#D60000‘>写入失败: " + fileName + " [" + ex.Message + "]</p>";
                    return Json(new { success = false, error = ex.Message, msg = msg }, "text/html");
                }
            }
            //返回的json要有success字段:success = true 上传成功;success=false 上传失败。
            return Json(new { success = true, name = qqfile.FileName, msg = msg }, "text/html");
        }
FineUploader 学习笔记

帮助类:ImportAndExport

 

FineUploader 学习笔记
      ///<summary>导入Excel数据</summary>
        /// <param name="filePath">上传文件路径</param>
        /// <param name="dbTableName">数据库表名</param>
        /// <param name="columnMapping">数据表列映射</param>
        public static void ImportExcel(string filePath, string dbTableName, List<string> columnMapping = null)
        {
            //Create connection string to Excel work book
            string excelConnectionString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + filePath + ";Extended Properties=‘Excel 12.0;HDR=YES;IMEX=1‘;";
            //Create Connection to Excel work book
            using (OleDbConnection excelConnection = new OleDbConnection(excelConnectionString))
            {
                using (OleDbCommand excelCommand = new OleDbCommand("Select * from [Sheet1$]", excelConnection))
                {
                    excelConnection.Open();//打开连接
                    OleDbDataReader excelReader = excelCommand.ExecuteReader();
                    using (DataTable dt = new DataTable())
                    {
                        dt.Load(excelReader);//转为DataTable
                        //已映射的列会传递给批量写入模块,此处只添加不在Excel表格中出现的字段,如一些共有字段或特殊字段。
                        dt.Columns.Add(new DataColumn("CreatedBy", typeof(System.String)));
                        dt.Columns.Add(new DataColumn("CreatedOn", typeof(System.DateTime)));

                        //填充字段值        
                        foreach (DataRow dr in dt.Rows)
                        {
                            dr["CreatedBy"] = "Test";
                            dr["CreatedOn"] = DateTime.Now;
                        }

                        try
                        {//包含增加的字段映射传递给批量写入模块
                            BatchCopy0(dt, dbTableName, columnMapping);
                        }
                        catch (Exception)
                        {
                            excelCommand.Dispose();
                            excelConnection.Close();//关闭excel连接
                            throw;
                        }
                    }
                    excelConnection.Close();//关闭连接
                }
            }
        }
      ///<summary>字段映射</summary>
        ///<param name="fileName">文件名称</param>
        ///<param name="columnMapping">输出映射表</param>
        ///<param name="tbName">数据库表名</param>
        public static void MappingColumn(string fileName, out string tbName, out List<string> columnMapping)
        {
            tbName = "";
            columnMapping = new List<string>();

            if (fileName != null)
            {
                switch (fileName)
                {
                    case "Member":
                        tbName = "Member";
                        columnMapping.Add("姓名,Name");
                        columnMapping.Add("邮箱,Email");
                        columnMapping.Add("生日,Birthday");
                        columnMapping.Add("年龄,Age");
                        break;
                    case "Guestbook":
                        tbName = "Guestbooks";
                        columnMapping.Add("消息,Message");
                        break;
                    default:
                        break;
                }
                ////以下字段未在Excel表格中出现,需传给SqlBulkCopy。
                columnMapping.Add("CreatedBy,CreatedBy");
                columnMapping.Add("CreatedOn,CreatedOn");
            }
        }
FineUploader 学习笔记
FineUploader 学习笔记
        ///<summary>复制数据-不带事务的</summary>
        /// <param name="dt">源数据</param>
        /// <param name="tbName">目标数据表名称</param>
        ///<param name="columnMapping">完整的字段映射</param>
        public static void BatchCopy0(DataTable dt, string tbName, List<string> columnMapping)
        {
            using (SqlBulkCopy sbc = new SqlBulkCopy(sqlConnectionString, SqlBulkCopyOptions.KeepNulls))
            {
                sbc.DestinationTableName = tbName;

                if (columnMapping != null)
                {
                    foreach (var mapping in columnMapping)
                    {
                        var split = mapping.Split(new[] { , });
                        sbc.ColumnMappings.Add(split.First(), split.Last());
                    }
                }
                try
                {
                    sbc.WriteToServer(dt);
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
        }    
FineUploader 学习笔记

 

Excel表格样式:

FineUploader 学习笔记

--End--

FineUploader 学习笔记

上一篇:nginx - 性能优化,突破十万并发


下一篇:oracle进sqlplus删除键不能用