首页 > 代码库 > 文件/图片，批量上传【神器】--WebUploader

文件/图片，批量上传【神器】--WebUploader

2024-08-31 02:07:33   224人阅读

<system.web>
<httpRuntime maxRequestLength="102400" executionTimeout="720" />
</system.web>
 

   pick: { id: ‘#picker‘,multiple:false }

上传大文件，有大小限制，分片就可以避免大小的问题。
进度条样式 bootstrap有

页面---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.mamicode.com/webuploader/webuploader.css" rel="stylesheet" type="text/css" />
    <script src="http://www.mamicode.com/webuploader/jquery-2.0.0.min.js" type="text/javascript"></script>
    <script src="http://www.mamicode.com/webuploader/webuploader.js" type="text/javascript"></script>
    <style type="text/css">
        /*【选择按钮样式,因为要用div所以实际都要设置一下css】*/
        #picker
        {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }
    </style>
    <script type="text/javascript">
 
        $(function () {
            setWebUploader();
            setWebUploaderImg();
        });
 
        //文件上传
        function setWebUploader() {
            var $ = jQuery,
        $list = $(‘#thelist‘),
        $btn = $(‘#ctlBtn‘),
        state = ‘pending‘,
        uploader;
 
            uploader = WebUploader.create({
 
                // 不压缩image
                resize: false,
 
                // swf文件路径
                swf: ‘webuploader/Uploader.swf‘,
 
                // 文件接收服务端。
                server: ‘dealUpload.aspx‘,
 
                // 可接受文件类型
                accept:{
                extensions: ‘txt,docx,xlsx‘
                       },
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: ‘#picker‘
            });
 
            // 当有文件添加进来的时候
            uploader.on(‘fileQueued‘, function (file) {
                $list.append(‘<div id="‘ + file.id + ‘" class="item">‘ +
            ‘<h4 class="info">‘ + file.name + ‘</h4>‘ +
            ‘<p class="state">等待上传...</p>‘ +
        ‘</div>‘);
            });
 
            // 文件上传过程中创建进度条实时显示。
            uploader.on(‘uploadProgress‘, function (file, percentage) {
                var $li = $(‘#‘ + file.id),
            $percent = $li.find(‘.progress .progress-bar‘);
 
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $(‘<div class="progress progress-striped active">‘ +
              ‘<div class="progress-bar" role="progressbar" style="width: 0%">‘ +
              ‘</div>‘ +
            ‘</div>‘).appendTo($li).find(‘.progress-bar‘);
                }
 
                $li.find(‘p.state‘).text(‘上传中‘);
 
                $percent.css(‘width‘, percentage * 100 + ‘%‘);
            });
 
 
            //【这些事件可以使用参数，res来获取从服务器】
            uploader.on(‘uploadSuccess‘, function (file, res) {
               var data = http://www.mamicode.com/ res._raw;
               if (data =http://www.mamicode.com/="ok") {
                    $(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);
                }
                else {
                    $(‘#‘ + file.id).find(‘p.state‘).text(‘异常‘);
                }
 
            });
 
            uploader.on(‘uploadError‘, function (file) {
                $(‘#‘ + file.id).find(‘p.state‘).text(‘上传出错‘);
            });
 
            uploader.on(‘uploadComplete‘, function (file) {
                $(‘#‘ + file.id).find(‘.progress‘).fadeOut();
            });
 
            uploader.on(‘all‘, function (type) {
                if (type === ‘startUpload‘) {
                    state = ‘uploading‘;
                } else if (type === ‘stopUpload‘) {
                    state = ‘paused‘;
                } else if (type === ‘uploadFinished‘) {
                    state = ‘done‘;
                }
 
                if (state === ‘uploading‘) {
                    $btn.text(‘暂停上传‘);
                } else {
                    $btn.text(‘开始上传‘);
                }
            });
 
 
            //点击【开始上传】触发的事件；
            $btn.on(‘click‘, function () {
 
                if (state === ‘uploading‘) {
                    uploader.stop();
                } else {
//                    showCover();
 
                    uploader.upload();
                }
            });
        } //End
        //图片上传
        function setWebUploaderImg() {
            // 图片上传demo
     
                var $ = jQuery,
        $list = $(‘#fileList‘),
                // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
 
                // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,
 
                // Web Uploader实例
        uploader;
 
                // 初始化Web Uploader
                uploader = WebUploader.create({
 
                    // 自动上传。
                    auto: true,
 
                    // swf文件路径
                    swf: ‘webuploader/Uploader.swf‘,
 
                    // 文件接收服务端。
                    server: ‘dealUpload.aspx‘,
 
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是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="file-item thumbnail">‘ +
                    ‘<img>‘ +
                    ‘<div class="info">‘ + file.name + ‘</div>‘ +
                ‘</div>‘
                ),
            $img = $li.find(‘img‘);
 
                    $list.append($li);
 
                    // 创建缩略图
                    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),
            $percent = $li.find(‘.progress span‘);
 
                    // 避免重复创建
                    if (!$percent.length) {
                        $percent = $(‘<p class="progress"><span></span></p>‘)
                    .appendTo($li)
                    .find(‘span‘);
                    }
 
                    $percent.css(‘width‘, percentage * 100 + ‘%‘);
                });
 
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on(‘uploadSuccess‘, function (file, res) {
 
                    $(‘#‘ + file.id).addClass(‘upload-state-done‘);
                    $(‘#‘ + file.id).append("<span>上传成功</span>");
                });
 
                // 文件上传失败，现实上传出错。
                uploader.on(‘uploadError‘, function (file) {
                    var $li = $(‘#‘ + file.id),
            $error = $li.find(‘div.error‘);
 
                    // 避免重复创建
                    if (!$error.length) {
                        $error = $(‘<div class="error"></div>‘).appendTo($li);
                    }
 
                    $error.text(‘上传失败‘);
                });
 
                // 完成上传完了，成功或者失败，先删除进度条。
                uploader.on(‘uploadComplete‘, function (file) {
                    $(‘#‘ + file.id).find(‘.progress‘).remove();
                });
 
            }//End
 
 
        function showCover() {
            $("#cover").show();
 
        }
    </script>
</head>
<body>
 
 
  <!--文件上传-->
 
    <!--【选择文件按钮，最好用div，别用button{无效}，js需要向这个选择文件按钮，append内容；】-->
    <div id="picker">选择文件</div>
 
 
    <!--【上传按钮】-->
    <button id="ctlBtn">开始上传</button>
        
 
    <!--【用来存放文件信息,蒙版效果，一批处理完毕清理{有些功能无效，比如fadeout，则通过这样的方式，结合手动的代码实现}】-->
  <!--  <div id=‘cover‘ style=" position:fixed; top:0px;left:0px; width:100%; height:100%; opacity:0.3; z-index:50; display:none;"></div>-->
    <div id="thelist" class="uploader-list" style=" z-index:100; position:absolute;left:100px;top:100px; "></div>
 
     
     <br /><br />
  <!--专门的炫的图片上传-->
<!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>
 
</body>
</html>


后台--
 protected void Page_Load(object sender, EventArgs e)
    {
        Upload();
    }
 
    private void Upload()
    {
        HttpFileCollection files = Request.Files;
        if (files.Count == 0)
        {
            Response.Write("no1");
            Response.End();
        }
 
        HttpPostedFile file = files[0];
        string fileName = file.FileName;
        string fileExt = Path.GetExtension(fileName);
        string[] allowdEXT = { ".doc", ".xlsx", ".txt", ".gif",".jpg",".jpeg",".bmp",".png" };
 
        if (!allowdEXT.Contains(fileExt))
        {
            Response.Write("no2");
            Response.End();
        }
 
        //根据实际需求，1 把文件插入文件列表数据库，方便管理等  2 文件重名问题 3 按照年月日创建文件夹 。。。
 
       string fileContainer = Request.MapPath("File");
       file.SaveAs(fileContainer + "/" + fileName);
       Response.Write("ok");
       Response.End();
 
    }


================mvc版本

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <link href="http://www.mamicode.com/~/Tools/webuploader/webuploader.css" rel="stylesheet" />
 
    <!-- 引入 Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 
    <script src="http://www.mamicode.com/~/Scripts/jquery-2.0.0.min.js"></script>
    <script src="http://www.mamicode.com/~/Tools/webuploader/webuploader.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="http://www.mamicode.com/~/Tools/bootstrap3/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style>
        #picker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }
    </style>
    <script>
        // 文件上传
 
        $(function () {
            //子窗体调用父窗体方法；
            $(document).click(function () {
                window.parent.docclick();
            });
         
            setWebUploader();
            setWebUploaderImg();
       
        });
        //文件上传
        function setWebUploader() {
            var $ = jQuery,
        $list = $(‘#thelist‘),
        $btn = $(‘#ctlBtn‘),
        state = ‘pending‘,
        uploader;
 
            uploader = WebUploader.create({
 
                // 不压缩image
                resize: false,
                //去重关闭
                duplicate:true,
                // swf文件路径
                swf: ‘~/Tools/webuploader/Uploader.swf‘,
 
                // 文件接收服务端。
                server: ‘/tool/WebUploadFile‘,
 
                // 可接受文件类型
                accept: {
                    extensions: ‘txt,docx,xlsx‘
                },
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: ‘#picker‘
            });
 
            // 当有文件添加进来的时候
            uploader.on(‘fileQueued‘, function (file) {
                $("#thelist").show();
                $list.append(‘<div id="‘ + file.id + ‘" class="item">‘ +
            ‘<h4 class="info">‘ + file.name + ‘</h4>‘ +
            ‘<p class="state">等待上传...</p>‘ +
        ‘</div>‘);
            });
 
            // 文件上传过程中创建进度条实时显示。
            uploader.on(‘uploadProgress‘, function (file, percentage) {
                var $li = $(‘#‘ + file.id),
            $percent = $li.find(‘.progress .progress-bar‘);
 
 
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $(‘<div class="progress progress-striped active">‘ +
              ‘<div class="progress-bar" role="progressbar" style="width: 0%">‘ +
              ‘</div>‘ +
            ‘</div>‘).appendTo($li).find(‘.progress-bar‘);
                }
 
                $li.find(‘p.state‘).text(‘上传中‘);
 
                $percent.css(‘width‘, percentage * 100 + ‘%‘);
            });
 
 
            //【这些事件可以使用参数，res来获取从服务器】
            uploader.on(‘uploadSuccess‘, function (file, res) {
                var data = http://www.mamicode.com/res._raw;
                if (data =http://www.mamicode.com/="ok") {
                    $(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);
                }
                else {
                    $(‘#‘ + file.id).find(‘p.state‘).text(‘异常‘);
                }
 
            });
 
            uploader.on(‘uploadError‘, function (file) {
                $(‘#‘ + file.id).find(‘p.state‘).text(‘上传出错‘);
            });
 
            uploader.on(‘uploadComplete‘, function (file) {
                $(‘#‘ + file.id).find(‘.progress‘).fadeOut();
            });
 
            uploader.on(‘all‘, function (type) {
                if (type === ‘startUpload‘) {
                    state = ‘uploading‘;
                } else if (type === ‘stopUpload‘) {
                    state = ‘paused‘;
                } else if (type === ‘uploadFinished‘) {
                    state = ‘done‘;
                }
 
                if (state === ‘uploading‘) {
                    $btn.text(‘暂停上传‘);
                } else {
                    $btn.text(‘开始上传‘);
                }
            });
 
 
            //点击【开始上传】触发的事件；
            $btn.on(‘click‘, function () {
 
                if (state === ‘uploading‘) {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
 
            $("#clobtn").on("click", function () {
                uploader.reset();
            });
 
 
 
        } //End
        //图片上传
        function setWebUploaderImg() {
            // 图片上传demo
 
            var $ = jQuery,
    $list = $(‘#fileList‘),
            // 优化retina, 在retina下这个值是2
    ratio = window.devicePixelRatio || 1,
 
            // 缩略图大小
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,
 
            // Web Uploader实例
    uploader;
 
            // 初始化Web Uploader
            uploader = WebUploader.create({
 
                // 自动上传。
                auto: true,
                //去重关闭
                duplicate: true,
                // swf文件路径
                swf: ‘~/Tools/webuploader/Uploader.swf‘,
 
                // 文件接收服务端。
                server: ‘/tool/WebUploadFile‘,
 
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是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="file-item thumbnail">‘ +
                ‘<img>‘ +
                ‘<div class="info">‘ + file.name + ‘</div>‘ +
            ‘</div>‘
            ),
        $img = $li.find(‘img‘);
 
                $list.append($li);
 
                // 创建缩略图
                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),
        $percent = $li.find(‘.progress span‘);
 
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $(‘<p class="progress"><span></span></p>‘)
                .appendTo($li)
                .find(‘span‘);
                }
 
                $percent.css(‘width‘, percentage * 100 + ‘%‘);
            });
 
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on(‘uploadSuccess‘, function (file, res) {
 
                $(‘#‘ + file.id).addClass(‘upload-state-done‘);
                $(‘#‘ + file.id).append("<span>上传成功</span>");
            });
 
            // 文件上传失败，现实上传出错。
            uploader.on(‘uploadError‘, function (file) {
                var $li = $(‘#‘ + file.id),
        $error = $li.find(‘div.error‘);
 
                // 避免重复创建
                if (!$error.length) {
                    $error = $(‘<div class="error"></div>‘).appendTo($li);
                }
 
                $error.text(‘上传失败‘);
            });
 
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on(‘uploadComplete‘, function (file) {
                $(‘#‘ + file.id).find(‘.progress‘).remove();
            });
 
        }//End
 
 
        function closeDiv(a) {
 
            if (a == "thelist") {
                $("#" + a).hide();
                $("#" + a).find(‘.item‘).remove();
            }
            
        }
 
    </script>
</head>
<body>
    <h1>webUploader批量上传神器</h1>
 
 
 
 
<h3>文件上传</h3>
 
    <!--文件上传-->
    <!--【选择文件按钮，最好用div，别用button{无效}，js需要向这个选择文件按钮，append内容；】-->
    <div id="picker">选择文件</div>
 
 
    <!--【上传按钮】-->
    <button id="ctlBtn" class="btn btn-default">开始上传</button>
 
 
    <!--【用来存放文件信息,蒙版效果，一批处理完毕清理{有些功能无效，比如fadeout，则通过这样的方式，结合手动的代码实现}】-->
 
    <div id="thelist" class="uploader-list" style=" z-index:100; position:absolute;left:0px;top:155px; border:1px solid gray;width:280px;height:300px;min-height:300px;display:none;">
        <button id="clobtn" onclick="closeDiv(‘thelist‘)"  type="button" class="btn btn-primary" style="float:right;margin-top:0px;">关闭</button>
 
    </div>
 
 
    <br /><br />
    <!--专门的炫的图片上传-->
    <!--dom结构部分-->
    <h3>图片上传</h3>
    <div id="uploader-demo">
        <!--用来存放item-->
        <div id="fileList" class="uploader-list"></div>
        <div id="filePicker">选择图片</div>
    </div>
</body>
</html>

 

     public ActionResult WebUploadFile()
        {
            string result = "";
 
            HttpFileCollectionBase files = Request.Files;
            if (files.Count == 0)
            {
                result = "no1";
            }
 
            HttpPostedFileBase file = files[0];
            string fileName = file.FileName;
            string fileExt = Path.GetExtension(fileName);
            string[] allowdEXT = { ".doc", ".xlsx", ".txt", ".gif", ".jpg", ".jpeg", ".bmp", ".png" };
 
            if (!allowdEXT.Contains(fileExt))
            {
                result = "no2";
            }
 
            //根据实际需求，1 把文件插入文件列表数据库，方便管理等  2 文件重名问题 3 按照年月日创建文件夹 。。。
 
            string fileContainer = Request.MapPath("/Content/Files");
            file.SaveAs(fileContainer + "/" + fileName);
     
            return Content("ok"); 
        }



=========================================文件分片，上传大文件。
   GUID = WebUploader.Base.guid(), //当前页面是生成的GUID作为标示  放 uploader；前面

    chunked: true,//参数
     formData: { guid: GUID },//参数


uploadSuccess事件，
   //如果是分片上传的，需要进行【分片合并】
                if (res.chunked) {
                    $.ajax({
                        url: "combin.ashx", //分片合并处理
                        type: "post",
                        data: { guid: GUID, fileExt: res.f_ext },
                        success: function (data) {
                            data = http://www.mamicode.com/$.parseJSON(data);
                            if (data.hasError) {
                                alert(‘文件合并失败！‘);
                            } else {
                                alert(decodeURIComponent(data.savePath));
                            }
                        }
                    });
 
 
                } else {
                    alert("上传成功。");
                }



//后台

     public class upFileDemo : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
 
            context.Response.ContentType = "text/plain";
            //如果进行了分片
            if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
            {
                //取得chunk和chunks
                int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序（从0开始）
                int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数
                //根据GUID创建用该GUID命名的临时文件夹
                string folder = context.Server.MapPath("/files/" + context.Request["guid"] + "/");
                string path = folder + chunk;
 
                //建立临时传输文件夹
                if (!Directory.Exists(Path.GetDirectoryName(folder)))
                {
                    Directory.CreateDirectory(folder);
                }
 
                FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
                BinaryWriter AddWriter = new BinaryWriter(addFile);
                //获得上传的分片数据流
                HttpPostedFile file = context.Request.Files[0];
                Stream stream = file.InputStream;
 
                BinaryReader TempReader = new BinaryReader(stream);
                //将上传的分片追加到临时文件末尾
                AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                //关闭BinaryReader文件阅读器
                TempReader.Close();
                stream.Close();
                AddWriter.Close();
                addFile.Close();
 
                TempReader.Dispose();
                stream.Dispose();
                AddWriter.Dispose();
                addFile.Dispose();
 
                context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"f_ext\" : \"" + Path.GetExtension(file.FileName) + "\"}");
            }
            else//没有分片直接保存
            {
                context.Request.Files[0].SaveAs(context.Server.MapPath("/files/" + DateTime.Now.ToFileTime() + Path.GetExtension(context.Request.Files[0].FileName)));
              //  context.Response.Write("{\"chunked\" : false, \"hasError\" : false}");
 
                context.Response.Write("ok");
            }
 
 
           
 
        
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }



//合并分片

    public class combin : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string guid = context.Request["guid"];
            string fileExt = context.Request["fileExt"];
            string root = context.Server.MapPath("/files/");
            string sourcePath = Path.Combine(root, guid + "/");//源数据文件夹
            string targetPath = Path.Combine(root, Guid.NewGuid() + fileExt);//合并后的文件
 
            DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);
          
 
            string GetDirectoryName = Path.GetDirectoryName(sourcePath);
            if (Directory.Exists(Path.GetDirectoryName(sourcePath)))
            {
                FileInfo[] files = dicInfo.GetFiles();
                foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))
                {
                    FileStream addFile = new FileStream(targetPath, FileMode.Append, FileAccess.Write);
                    BinaryWriter AddWriter = new BinaryWriter(addFile);
 
                    //获得上传的分片数据流
                    Stream stream = file.Open(FileMode.Open);
                    BinaryReader TempReader = new BinaryReader(stream);
                    //将上传的分片追加到临时文件末尾
                    AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                    //关闭BinaryReader文件阅读器
                    TempReader.Close();
                    stream.Close();
                    AddWriter.Close();
                    addFile.Close();
 
                    TempReader.Dispose();
                    stream.Dispose();
                    AddWriter.Dispose();
                    addFile.Dispose();
                }
                DeleteFolder(sourcePath);
                context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"savePath\" :\"" + System.Web.HttpUtility.UrlEncode(targetPath) + "\"}");
                //context.Response.Write("{\"hasError\" : false}");
            }
            else
            {
                context.Response.Write("{\"hasError\" : true}");
            }
             
        }
 
 
        /// <summary>
        /// 删除文件夹及其内容
        /// </summary>
        /// <param name="dir"></param>
        private static void DeleteFolder(string strPath)
        {
            //删除这个目录下的所有子目录
            if (Directory.GetDirectories(strPath).Length > 0)
            {
                foreach (string fl in Directory.GetDirectories(strPath))
                {
                    Directory.Delete(fl, true);
                }
            }
            //删除这个目录下的所有文件
            if (Directory.GetFiles(strPath).Length > 0)
            {
                foreach (string f in Directory.GetFiles(strPath))
                {
                    System.IO.File.Delete(f);
                }
            }
            Directory.Delete(strPath, true);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


 
//========================

    $(function () {
        setWebUploader();
    });
 
    var Needend = false;
    //文件上传
    function setWebUploader() {
        var $ = jQuery,
        $list = $(‘#thelist‘),
        $btn = $(‘#ctlBtn‘),
        state = ‘pending‘,
        GUID = WebUploader.Base.guid(), //当前页面是生成的GUID作为标示
        uploader;
      
        uploader = WebUploader.create({
 
            // 不压缩image
            resize: false,
 
            // swf文件路径
            swf: ‘webuploader/webuploader/Uploader.swf‘,
            chunked: true,
            fileNumLimit: 1,
            threads: 1, //上传并发数
            timeout: 0,
            formData: { guid: GUID, keyword: $("#txtKeyWord").val(), sele_next: $("#sele_flie").val() },
            // 文件接收服务端。
            server: ‘Handler.ashx‘,
 
            // 可接受文件类型
            //                accept: {
            //                    extensions: ‘txt,docx,xlsx‘
            //                },
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: ‘#picker‘
        });
 
        // 当有文件添加进来的时候
        uploader.on(‘fileQueued‘, function (file) {
         
            $list.append(‘<div id="‘ + file.id + ‘" class="item">‘ +
            ‘<h4 class="info">‘ + file.name + ‘</h4>‘ +
            ‘<p class="state">等待上传...</p>‘ +
        ‘</div>‘);
        });
 
 
        //文件加入队列之前
        uploader.on(‘beforeFileQueued‘, function (file) {
          
            var limit = ‘<%=limitMark %>‘;
            if (limit == "NeedLimit") {//如果需要进行限制
                var leng = file.size;
                if (leng > 52428800) {
                    alert("你所上传的文件大小大于了50兆，不能上传。");
                    return false;
                }
 
            }
            return true;
 
        });
 
 
        
 
 
        // 文件上传过程中创建进度条实时显示。
        uploader.on(‘uploadProgress‘, function (file, percentage) {
            var $li = $(‘#‘ + file.id),
            $percent = $li.find(‘.progress .progress-bar‘);
 
            // 避免重复创建
            if (!$percent.length) {
                $percent = $(‘<div class="progress progress-striped active">‘ +
              ‘<div class="progress-bar" role="progressbar" style="width: 0%;">‘ +
              ‘</div>‘ +
            ‘</div>‘).appendTo($li).find(‘.progress-bar‘);
            }
 
            $li.find(‘p.state‘).text(‘上传中‘);
 
            $($percent).css(‘width‘, percentage * 100 + ‘%‘);
        });
 
 
        //【这些事件可以使用参数，res来获取从服务器】
        uploader.on(‘uploadSuccess‘, function (file, res) {
 
            if (res.hasError) {
                alert(res.reson);
                $(‘#‘ + file.id).find(‘p.state‘).text(res.reson);
            }
            //如果是分片上传的，需要进行【分片合并】
            if (res.chunked) {
                $.ajax({
                    url: "combin.ashx", //分片合并处理
                    type: "post",
                    data: { guid: GUID, fileExt: res.f_ext, fileName: file.name, keyword: $("#txtKeyWord").val(), sele_next: $("#sele_flie").val() },
                    success: function (data) {
                        data = http://www.mamicode.com/$.parseJSON(data);
                        if (data.hasError) {
                            alert(‘文件合并失败！‘);
                        } else {
                            $(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);
 
                        }
                    }
                });
 
 
            } else {
                if (res.hasError) {
                    $(‘#‘ + file.id).find(‘p.state‘).text("失败！" + res.reason);
 
                }
                else {
                    $(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);
                }
 
            }
 
 
 
 
 
            //                var data = http://www.mamicode.com/res._raw;
            //                if (data =http://www.mamicode.com/="ok") {
            //                    $(‘#‘ + file.id).find(‘p.state‘).text(‘已上传‘);
            //                }
            //                else {
            //                    $(‘#‘ + file.id).find(‘p.state‘).text(‘异常‘);
            //                }
 
        });
 
        uploader.on(‘uploadError‘, function (file, reason) {
            $(‘#‘ + file.id).find(‘p.state‘).text(‘上传出错,出错原因：‘+reason);
        });
 
        uploader.on(‘uploadComplete‘, function (file) {
 
//            if ($btn.attr("disabled") == "disabled") {
//                Needend = true;
//            }
//            else {
//                
//            }
 
//            alert(Needend);
 
//            $(‘#‘ + file.id).find(‘.progress‘).fadeOut();
        });
 
        uploader.on(‘all‘, function (type) {
            if (type === ‘startUpload‘) {
                state = ‘uploading‘;
            }
            else if (type === ‘stopUpload‘) {
                state = ‘paused‘;
            }
            else if (type === ‘uploadFinished‘) {
          
                state = ‘done‘;
//                $btn.removeAttr("disabled");
//                $("#muliTD").find("select").removeAttr("disabled");
//                $("#txtKeyWord").removeAttr("disabled");
 
                window.location.href = "http://www.mamicode.com/myDocument.aspx";
            }
 
            if (state === ‘uploading‘) {
                $btn.attr("disabled", "disabled");
                $("#muliTD").find("select").attr("disabled", "disabled");
                $("#txtKeyWord").attr("disabled", "disabled");
 
            }
        });
 
 
        //点击【开始上传】触发的事件；
        $btn.on(‘click‘, function () {
            if ($("#sele_flie").val() == "-1") {
                alert("请选择目录");
                return false; //不再执行，
            }
 
 
 
 
            if (state === ‘uploading‘) {
                uploader.stop();
            } else {
                //                    showCover();
                uploader.options.formData.keyword = $("#txtKeyWord").val();
 
 
                var endSelfile = "";
                var s = $("#muliTD").find("select");
                $.each(s, function (c, d) {
                    if ($(d).val() == "-1") {
                        return false;
                    }
                    else {
                        endSelfile = $(d).val();
                    }
                });
 
 
                uploader.options.formData.sele_next = endSelfile;
                uploader.upload();
            }
        });
    } //End






文件/图片，批量上传【神器】--WebUploader


联系
我们