大家好 在这里 给大家介绍一下款适用于大文件传输的插件--------------------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
好了 我的分享到此结束了.
码字不易 点个关注呗!
原文地址: