------------------------------------------ ------ Effect Preview ------------------------------------
------------------------------------------html ------------------------------------------
upload files
<input name="fileName" accept=".zip" class="btn btn-primary" type="file" FileName="" onchange="imgChange(event)">
The progress bar codes
<div id="Course">
<div class="rate"></div>
<span>0%</span>
</div>
------------------------------------------class------------------------------------------
/*样式2*/
.file {position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;}
.file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;}
.file:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;}
#Course{overflow-x: hidden; overflow-y: hidden; width: 200px;background-color: #dadada; position:relative; height:20px; margin-top:2px; white-space:normal;}
#Course .rate{ width:0%; background-color:#F00; height:20px;}
#Course span{ display:block; float:right;right:0px; top:0px; z-index:1; position:absolute;text-align: right;}
Js ------- ------------------------------------------ ------------------------------
var FileData = null; // file
function imgChange (E) {
// console.info (e.target.files [0]); // image file
var File = e.target.files [0] .name;
var strFileName = file.replace (/(.*\/)*([^.]+).*/ ig, "$ 2"); // remove the suffix
var AllImgExt = ".zip |";
var extname = file.substring ( file.lastIndexOf ( ".")) toLowerCase . (); // ( all letters path all lowercase)
IF (AllImgExt.indexOf (extname + "|") == -1) {
ErrMsg = "the . Please upload a file type does not allow uploading "+ AllImgExt +" type of file, the current file type is "+ extname;
Alert (ErrMsg);
$ Val ((" Box-body .panel the INPUT [the Name = fileName]. "). "");
FileData = null;
return to false;
} the else {
var DOM = $ ( 'INPUT [name = "fileName"]') [0];
// Console.info (dom.value); // this is the path to the file C: \ fakepath \ icon (5) .png
//console.log(e.target.value);// this path and the file is the same as above dom.value
$ ( 'input [name = " fileName"]'). attr ( "FileName", dom .Value);
.. IF ($ (. "Box-body .input .panel-Group") EQ (0) .find ( "INPUT") Val () == "") {
$ ( "Box .panel. . ") EQ (0) .find (" -body .input-Group. INPUT ") Val (strFileName);
}
var Reader the FileReader new new = ();
reader.onload = (function (File) {
return function (E) {
FileData = this.result; // this is the data of the base64
};
}) (e.target.files [0]);
reader.readAsDataURL (e.target.files [0]);
return to true;
}
}
//add files
ps: After returning, need to return to repeat the guid, id project after successfully added, and save the file absolute path
$.ajax({
url: "../User/AddConfigFile",
cache: false,
async: true,
type: "post",
data: { },
dataType: "json",
success: function (jsonData) {
if (jsonData.Succeed) {
UploadingFileData(FileData, jsonData.Data.Guid, jsonData.Data.ConfigFileId, jsonData.Data.FileUrl);
} else {
alert(jsonData.Error);
}
}
})
UploadingFileData function (Data, GUID, ID, path) {
var = the Identity Cookie_Data.Identity;
var = overallLength data.length; // total length
var packet = 1024 * 1000; // number of times a packet
// rounded up decimals to the integer portion plus. 1
var = bagNum Math.ceil (overallLength / packet); // total number of packets
// sub request
$ ( '# AddData') attr ( 'disabled', "true");. // add disabled Attributes
BatchData(0);
function BatchData(i) {
var Next = i + 1;//当前页数
var kpNum1 = (i * packet);//开始
var kpNum2 = (Next* packet);//开始
var FileData = data.substring(kpNum1, kpNum2);//每次发送的数据
$.ajax({
url: "../User/UploadingFileData",
cache: false,
async: true,
type: "post",
data: { Identity: Identity, ConfigFileId:id, Guid: guid, Path: path, FileData: FileData, BagNum: bagNum, Next: Next, overallLength: overallLength },
dataType: "json",
success: function (jsonData) {
if (jsonData.Succeed) {
if (bagNum > Next) {
BatchData(Next);
CourseNum(bagNum, Next + 1);
//window.setTimeout(function () {
BatchData // (the Next);
// CourseNum (bagNum, the Next +. 1);
//}, 100);
} the else IF (the Next == bagNum) {
. $ ( '# AddData') removeAttr ( "Disabled"); // remove the disabled attribute
the Data ();
the Close ();
Alert ( "file upload successfully");
FileData = "";
}
} the else {
Alert ( "failed files");
CourseNum (. 1, 0);
$ ( '#AddData') removeAttr ( "disabled ");. // remove disabled property
FileData = "";
}
}
})
}
}
// progress bar
function CourseNum (COUNT, NUM) {
var NUM = the parseInt ((NUM * 100) / COUNT) + "%";
$ ( "# Course, .rate") width (NUM);.
$ ( "# Course, span") HTML (NUM).;
if (num == "100%") {
$("#Course .rate").css("background-color", "#12ff00");
}
}
-----------------------------------------.net background Interface ----- --------------------------------------
Id increment after return 1. Add guid database successfully added, and the folder where you saved the absolute path
2. The sub-uploaded file interface, Identity user identification for the project, can be ignored
//字典
static Dictionary<string, List<RequestFile>> openWith = new Dictionary<string, List<RequestFile>>();
public ActionResult UploadingFileData()
{
try
{
string Identity = Request.Form["Identity"].ToString();
//Users User = new UserOnLineBLL().ISIdentity(Identity);
string Path = Request.Form["Path"].ToString();
int ConfigFileId = int.Parse(Request.Form["ConfigFileId"].ToString());
string FileData = Request.Form["FileData"].ToString();//分包数据
int BagNum = int.Parse(Request.Form["BagNum"].ToString());//共多少包
int Next = int.Parse(Request.Form["Next"].ToString());// 第几包
string OverallLength = Request.Form["OverallLength"].ToString();//总长度。
string Guid = Request.Form["Guid"].ToString();
if (string.IsNullOrEmpty(Guid))
{
Response.Succeed = false;
Response.Error = "传输失效";
return Json(Request);
}
RequestFile requestFile = new RequestFile() { Guid = Guid, Count = BagNum, Index = Next, Data = FileData };
if (requestFile.Count > 1)//文件总量大于1视为切割文件
{
//判断是否存在
if (openWith.ContainsKey(Guid)) // True
{
var lsdata = openWith[Guid];
//判断此次包是否已拥有（排除网络原因或者其他原因导致数据包重叠而影响后期的合并）
if (!lsdata.Exists(it => it.Index == requestFile.Index))
{
lsdata.Add(requestFile);
//判断
if (lsdata.Count == requestFile.Count)
{
RequestFile onerftemp = new RequestFile();
onerftemp.Index = 1;
onerftemp.Count = 1;
onerftemp.Guid = lsdata.First().Guid;
onerftemp.Data = "";
//合并处理
var temp = lsdata.OrderBy(it => it.Index);
foreach (var item in temp)
{
onerftemp.Data += item.Data;
}
//清除已合并的多文件碎片
openWith.Remove(Guid);
//此为多文件合并后的业务处理
//调用业务处理
FileClass FileClass = new FileClass().FileData(onerftemp.Data);
Response.Succeed = true;
Response.SucceedEnd = Base64Convert.Base64ToFileAndSave(FileClass.Data, Path);
}
else Response.Succeed = true;
}
else Response.Succeed = true;
}
else
{
//初始化在添加
List<RequestFile> ls = new List<RequestFile>();
ls.Add(requestFile);
openWith.Add(Guid, ls);
Response.Succeed = true;
}
}
else
{
//此为小个单文件的业务处理
//调用业务处理
FileClass FileClass = new FileClass().FileData(requestFile.Data);
Response.SucceedEnd = Base64Convert.Base64ToFileAndSave(FileClass.Data, Path);
Response.Succeed = true;
}
#endregion
//全部处理成功进入
if (Response.SucceedEnd)
{
//方法1：去文件内获取
string Size = FileHelp.PrintFileVersionInfo(Path);
//方法2：直接计算
//string Size = FileHelp.GUIStyleCalcSize(Double.Parse(OverallLength));
int ret = new ConfigFileBLL().UpConfigFileSiZeWhereAutoId(ConfigFileId, Size);
}
return Json(Response);
}
catch (Exception ex)
{
Response.Succeed = false;
Response.Error = ex.ToString();
return Json(Response);
}
}
---------------------------------------------------------------------------------------------------------
声明：自创数据分包， 使用请在下方留言，多多交流。
对大家有帮助还望留言支持。