Uploader插件使用实例（大文件不行）

配置文件

<system.web>
        <compilation debug="true" targetFramework="4.5" />
        <httpRuntime targetFramework="4.5" maxRequestLength="1048576" executionTimeout="6000"/>
</system.web>
<system.webServer>
     <security>
          <requestFiltering>
              <requestLimits maxAllowedContentLength="1048576">
 
              </requestLimits>
          </requestFiltering>
     </security>
</system.webServer>

前台JS代码如下：

var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
    $(function () {
        var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 90 * ratio,
        thumbnailHeight = 90 * ratio,
        // Web Uploader实例
        uploader;
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,
 
            // swf文件路径
            swf: applicationPath + '/js/Uploader.swf',
 
            // 文件接收服务端。
            server: applicationPath + '/Controller/fileupload.ashx',
 
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
 
            //只允许选择图片
            //accept: {
            //    title: 'Images',
            //    extensions: 'gif,jpg,jpeg,bmp,png',
            //    mimeTypes: 'image/*'
            //}
        });
 
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="cp_img">' +
                        '<img>' +
                    '<div class="cp_img_jian"></div></div>'
                    ),
                $img = $li.find('img');
 
 
            // $list为容器jQuery实例
            $list.append($li);
 
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
 
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });
 
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id);
            var txtState = (percentage * 100).toFixed(0) + '%';
            $li.find('.file_state').text(txtState);
            $li.find('.file_state').attr("title", txtState);
            $li.find('.file-mask').css('width', percentage * 100 + '%');
            $(".layui-layer-close").hide();
        });
 
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            alert("上传成功");
        });
 
        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            alert("上传失败");
             //避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });
 
        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
 
        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单
 
        });
 
        //开始上传
        $("#ctlBtn").click(function () {
            uploader.upload();
        });
 
        //显示删除按钮
        $(".cp_img").live("mouseover", function () {
            $(this).children(".cp_img_jian").css('display', 'block');
 
        });
        //隐藏删除按钮
        $(".cp_img").live("mouseout", function () {
            $(this).children(".cp_img_jian").css('display', 'none');
 
        });
        //执行删除方法
        $list.on("click", ".cp_img_jian", function () {
            var Id = $(this).parent().attr("id");
            uploader.removeFile(uploader.getFile(Id, true));
            $(this).parent().remove();
        });
    });

HTML代码如下：

<body>
    <div id="fileList"></div>
    <!--这是存放图片的容器-->
    <div class="cp_img_jia" id="filePicker">请选择文件</div>
    <!--这是上传按钮-->
    <button id="ctlBtn">上传文件</button>
</body>

后台代码：

private void SaveFile()
        {
            string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "File");//文件保存目录
            HttpFileCollection files = HttpContext.Current.Request.Files;
            string _result="";
            //判断目录是否存在，不存在则创建目录
            if (!Directory.Exists(localPath))
            {
                Directory.CreateDirectory(localPath);
            }
            var suffix = files[0].ContentType.Split('/');//获取客户端发送的文件的MIME内容类型
            string exName = suffix[1];//获取文件后缀名
            string filename = HttpContext.Current.Request["name"];//获取文件名
            string fullPathName = localPath + "\\" + filename;//路径+文件名
            try
            {
                files[0].SaveAs(fullPathName);//保存文件
            }
            catch (Exception)
            {
                _result = "{error:上传失败}";
                throw;
            }
             _result= "{success:上传成功}";
            HttpContext.Current.Response.Write(_result);
        }

posted on 2017-10-18 15:10 Nikogls_Hu 阅读(505) 评论(0) 收藏举报