WebUploader-----大文件列表上传

大家好在这里给大家介绍一下款适用于大文件传输的插件--------------------WebUploader

首先呢我先给出该插件需要的参数文档官网地址:http://fex.baidu.com/webuploader/

下面是我写的一个简单的使用WebUploader的demo 水平有限哈哈!

给出源码:前台HTML布局以及JS代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style>

        #fileTable 
        {
            width:900px;
            border:1px solid #744e4e;
        }
            #fileTable thead tr td 
            {
                border:1px solid #744e4e;
            }
            #fileTable tbody tr  td{
             
                border:1px solid #744e4e;
            }

        .progress {
            width:400px;
        }
        .progress_div {
            height:20px;
            width:400px;
           background-color:#d1bfbf;
        }
        .progress_chiren {
            height:20px;
            width:0px;
           background-color:#a6f895;
        }
        .manager_tool {
            width:150px;
        }
        .txt_jindu {
         
          float:left;
          margin-left:170px;
        }
    </style>

   
    <script src="Scripts/jquery-1.10.2.js"></script>//注意  一定要引入版本较高的Jquery
    <link href="Content/webuploader-0.1.5(2)/webuploader.css" rel="stylesheet" />//这是资源Css路径,引入自己的就行了
  
    <script src="Content/webuploader-0.1.5(2)/webuploader.js"></script>//Js路径
</head>
<body>

    <table id="fileTable">

        <thead>
            <tr>
                <td>
                    文件名
                </td>
                <td>
                    文件大小
                </td>
                <td>
                    状态
                </td>
                <td class="progress">
                    进度
                </td>
            </tr>
        </thead>
        <tbody id="demoList">
        </tbody>
    </table>
    <div id="uploader" class="wu-example" style="float:left;">
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <button id="ctlBtn" >开始上传</button>
        </div>
    </div>
    <script>
       
        $(function ()
        {
            uploader = WebUploader.create(
            {
                swf: 'Content/webuploader-0.1.5(2)/Uploader.swf',//注意路径
                server: '/Home/Upload_File/',//文件接收服务器端口
                pick: '#picker',//上传按钮
                resize: false,
                method: 'post',
                chunked: true,//是否分片上传
                //formData: { "code": "Add", "numberStr": ss },//上传参数
                chunkRetry: 2,//重传次数
                threads: 5,//允许几个文件同时长传
                fileNumLimit: 10,//允许文件上传数量
                duplicate: true,//是否允许文件重复
                chunkSize: 214748364800,//每一片的大小
            });


            //当文件被加入队列以后触发。
            uploader.on('fileQueued', function (file)
            {
                var filesize = FileSize(file.size);
                var strHtml = '<tr  id=' + file.id + '><td>' + file.name + '</td><td>' + filesize + '</td><td><span class="gray:">等待上传</span></td><td><div class="progress_div"><span class="txt_jindu">0%</span><div class="progress_chiren"></div></div></td></tr>';
                $("#demoList").append(strHtml);
            });

         
            //上传过程中触发，携带上传进度。
            uploader.on('uploadProgress', function (file, percentage)
            {
                var state = "正在上传";
                var per = percentage * 100;
                per = Math.round(per * 100) / 100;//计算百分比

                $("#" + file.id).children().eq(3).children().eq(0).children().eq(0).html(per + '%');//赋值百分比

                $("#" + file.id).children().eq(3).children().eq(0).children().eq(1).css("width", per + '%');//动态改变进度条宽度
                if (per < 100) {
                    state = "上传中";
                    $("#" + file.id).children().eq(2).css("color", "red");
                }
                $("#" + file.id).children().eq(2).html(state);//改变状态
            });

            // 当文件上传失败时触发。
            uploader.on('uploadError', function (file)
            {
                $("#" + file.id).children().eq(2).css("color", "red");
                $("#" + file.id).children().eq(2).html("上传失败");//改变状态
            });



           // 当文件上传成功时触发。
            uploader.on('uploadSuccess', function (file)
            {
                $("#" + file.id).children().eq(2).css("color", "green");
                $("#" + file.id).children().eq(2).html("上传成功");//改变状态
            });


            //上传按钮
            $('#ctlBtn').on('click', function ()
            {
                    uploader.upload();    
            });
        });
        //计算文件大小
        function FileSize(filesize) {
            var fileSize = 0;

            if (filesize > 1024 * 1024) {
                fileSize = (Math.round(filesize * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            }
            else {
                fileSize = (Math.round(filesize * 100 / 1024) / 100).toString() + 'KB';
            }
            return fileSize;
        }
    </script>
</body>
</html>

后台使用.netMVC做的文件接收服务接口

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PrcticeDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }


        
        public void Upload_File()
        {
            try
            {
                System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
                if (files.Count == 0)
                {
                    
                }
                for (int i = 0; i < files.AllKeys.Count(); i++)
                {

                    if (files[i].FileName.Length > 0)
                    {
                        System.Web.HttpPostedFile postedfile = files[i];

                        string filePath = "";

                        var ext = Path.GetExtension(postedfile.FileName);

                        var fileName = DateTime.Now.Ticks.ToString() + ext;

                        // 组合文件存储的相对路径
                        filePath = "/Content/Upload/Temp/" + fileName;
                        var path = Server.MapPath(filePath);
                        postedfile.SaveAs(path);                        
                    }
                }
            }
            catch (Exception ex)
            {
                string error = ex.Message;
            }
          
        }
    }
}

若是使用.net的朋友呢一定要注意Web配置文件,因为IIS会限制文件上传的大小或者请求的速度

我们需要对配置文档进行简单的配置

首先:在 <system.webServer> </system.webServer>节点中加入

<security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="2072576000" />
      </requestFiltering>
</security>

其次:在 <system.web></system.web>节点下加入

 <httpRuntime targetFramework="4.5.2" executionTimeout="90" maxRequestLength="2097151" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />

源码链接:https://download.csdn.net/download/bigbossc/10585774

好了我的分享到此结束了.

码字不易点个关注呗!

WebUploader-----大文件列表上传

猜你喜欢