逆天之路

你以什么眼光看世界,你的世界就是什么。你不相信什么,你的世界就没有什么....

Fork me on GitHub

您现在的位置是:首页>笔记> 当前文章

【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

作者:dunitian 发布时间:2016-07-16 09:53 点击量:1119

分类: > .Net笔记 > 基础技能 > Bootstrap

  • 开源地址:https://github.com/dunitian/LoTUploader

    WebUploader基础上的封装改善,一句代码全部实现(样式美化,实例JS优化(配置优化,样式调整,名称 大小显示,错误处理等),后端代码。。。。。)

     效果:(完整demo:https://github.com/dunitian/LoTUploader/tree/V1.0.1/Demo

    一句代码:$.lotuploader('lot-uploader', '/Home/Upload'); //必填参数:ID,Server地址 (完整案例看Demo部分)

    第一步:引入样式

    <link href="Scripts/lotUploader/lotuploader1.0.1.min.css" rel="stylesheet" />

    第二步:自己定义一个DIV(id名任意)

    <div id="lot-uploader"></div>

    第三步:引入脚本

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="Scripts/lotUploader/lotuploader1.0.1.min.js"></script>

    代码部分:

    <script type="text/javascript">

    $.lotuploader({
    lotDocId: 'lot-uploader', //ID
    lotUrl: '/Home/Upload', //服务器Post地址
    });

    </script>

    单文件处理:

    $.lotuploader({
            lotDocId: 'lot-uploader',
            lotUrl: '服务器Post地址',
            oneFile: true,
            fileSize: 1024 * 1024 * 5,
            btnStr: '点我就上传默认展图',
            lotSuccessFunc: function (file,data) {
                //方法主体
            },
            lotErrorFunc: function (msg) {
                $('#lot-uploader').append('<div class="lot-temp" style="color:red">'   msg   '</div> ');
                setTimeout(function () {
                    $('.lot-temp').remove();
                }, 2000);
            }
        });

    后端实例代码:

    /// <summary>
            /// 图片上传
            /// </summary>
            /// <returns></returns>
            public JsonResult Upload(HttpPostedFileBase file)
            {
                if (file == null) { return Json(new { status = false, msg = "图片提交失败" }); }
                if (file.ContentLength > 10485760) { return Json(new { status = false, msg = "文件10M以内" }); }
                string filterStr = ".gif,.jpg,.jpeg,.bmp,.png";
                string fileExt = Path.GetExtension(file.FileName).ToLower();
                if (!filterStr.Contains(fileExt)) { return Json(new { status = false, msg = "图片格式不对" }); }
                //防止黑客恶意绕过,从根本上判断下文件后缀
                if (!file.InputStream.CheckingExt())
                {
                    //todo:一次危险记录
                    return Json(new { status = false, msg = "图片格式不对" });
                }
                //todo: md5判断一下文件是否已经上传过,如果已经上传直接返回 return Json(new { status = true, msg = sqlPath });
     
                string path = string.Format("{0}/{1}", "/lotFiles", DateTime.Now.ToString("yyyy-MM-dd"));
                string fileName = string.Format("{0}{1}", Guid.NewGuid().ToString("N"), fileExt);
                string sqlPath = string.Format("{0}/{1}", path, fileName);
                string dirPath = Request.MapPath(path);
     
                if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); }
                try
                {
                    //todo:缩略图
                    file.SaveAs(Path.Combine(dirPath, fileName));
                    //todo: 未来写存数据库的Code
                }
                catch { return Json(new { status = false, msg = "图片保存失败" }); }
                return Json(new { status = true, msg = sqlPath });
            }
    /// <summary>
        /// 判断扩展名是否是指定类型---默认是判断图片格式,符合返回true(没有释放stream,请手动:file.InputStream.Dispose();)
        /// eg:图片 压缩 文档:"7173", "255216", "6677", "13780", "8297", "55122", "8075", "208207"
        /// eg:img,"7173", "255216", "6677", "13780" //gif  //jpg  //bmp //png
        /// eg:file,"8297", "55122", "8075", "208207" //rar //7z //zip   文档系列
        /// </summary>
        /// <param name="stream">文件流</param>
        /// <param name="fileTypes">文件扩展名</param>
        /// <returns></returns>
        public static bool CheckingExt(this Stream stream, params string[] fileTypes)
        {
            if (fileTypes == null || fileTypes.Length == 0) { fileTypes = new string[] { "7173", "255216", "6677", "13780" }; }
            bool result = false;
            string fileclass = "";
     
            #region 读取头两个字节
            var reader = new BinaryReader(stream);
            byte[] buff = new byte[2];
            try
            {
                reader.Read(buff, 0, 2);//读取每个文件的头两个字节
                fileclass = buff[0].ToString()   buff[1].ToString();
            }
            catch (System.Exception ex) { stream.Dispose(); reader.Dispose(); return false; }
            #endregion
     
            #region 校验
            for (int i = 0; i < fileTypes.Length; i  )
            {
                if (fileclass == fileTypes[i])
                {
                    result = true;
                    break;
                }
            }
            #endregion
            return result;
        }

    注意点:

    如果你项目并不使用font-awesome,那请吧.upload-state-done:after样式修改一下,这样成功后就很明了
    
    案例没有采用纯Net语法,只是把服务端处理用Net处理了下。index.html部分通用

    CDN地址:

    //7xocov.com2.z0.glb.qiniucdn.com/lotuploader.swf
    //7xocov.com2.z0.glb.qiniucdn.com/lotuploader1.0.1.min.css
    //7xocov.com2.z0.glb.qiniucdn.com/lotuploader1.0.1.js
    //7xocov.com2.z0.glb.qiniucdn.com/lotuploader1.0.1.min.js
    //7xocov.com2.z0.glb.qiniucdn.com/progress.png


    webUploader封装版:

    //7xocov.com2.z0.glb.qiniucdn.com/lotUploader.1.0.1.js



关键字词  毒逆天  原创

 

毒逆天