webuploader上传进度条 上传删除

216 2019-09-09 11:10:24

原文转载链接(由于原文没有格式,看起来不方便所以这里转载了)
https://www.cnblogs.com/hf-0712/p/7919468.html
<script type="text/javascript">
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
var GUID = WebUploader.Base.guid(); //一个GUID
$(function() {
	var $ = jQuery;
	var $list = $('#thelist');
	var uploader = WebUploader.create({

		// 选完文件后,是否自动上传。
		auto: true,
		// swf文件路径
		swf: applicationPath + '../scripts/Uploader.swf',
		// 文件接收服务端。
		server: applicationPath + '/Uploader/Upload',
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建,可能是input元素,也可能是flash.
		pick: '#picker',
		chunked: true, //开始分片上传
		chunkSize: 2048000, //每一片的大小
		formData: {
			guid: GUID //自定义参数,待会儿解释
		},
		// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
		resize: false,
		duplicate: false
	});
	// 当有文件被添加进队列的时候
	uploader.on('fileQueued', function(file) {

		$list.append('<div id="' + file.id + '" class="item">' +
			'<h4 class="info">' + file.name + '</h4>' +
			'<p class="state">等待上传...</p>' +
			'<p class="remove-this">删除</p>' +
			'</div>');

		//删除上传的文件
		$list.on('click', '.remove-this', function() {
			if ($(this).parent().attr('id') == file.id) {
				uploader.removeFile(file);
				$(this).parent().remove();
			}
		});

	});
	// 文件上传过程中创建进度条实时显示。
	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" style="height:20px; background-color:red; role="progressbar" style="width: 0%">' +
				'</div>' +
				'</div>').appendTo($li).find('.progress-bar');
		}

		$li.find('p.state').text('上传中');
		$percent.css('width', percentage * 100 + '%');

	});

	// 文件上传成功,给item添加成功class, 用样式标记上传成功。
	uploader.on('uploadSuccess', function(file, response) {
		$('#' + file.id).find('p.state').text('已上传');
		$.post('/Uploader/Merge', {
			guid: GUID,
			fileName: file.name
		}, function(data) {
			$("#uploader").children("#" + file.id).children(".state").html("上传成功...");
			//$("#uploader .state").html("上传成功...");
		});
	});

	// 文件上传失败,显示上传出错。
	uploader.on('uploadError', function(file) {
		$('#' + file.id).find('p.state').text('上传出错');
	});

	// 完成上传完了,成功或者失败,先删除进度条。
	uploader.on('uploadComplete', function(file) {
		$('#' + file.id).find('.progress').fadeOut();
	});

	//所有文件上传完毕
	uploader.on("uploadFinished", function() {
		//提交表单

	});
	//开始上传
	$("#ctlBtn").click(function() {
		uploader.upload();
	});

});
</script>
<body>
<div id="uploader" class="wu-example">
	<!--用来存放文件信息-->
	<div id="thelist" class="uploader-list"></div>
	<div class="btns">
		<div id="picker">选择文件</div>
		<input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" />
	</div>
</div>
</body>
public ActionResult Upload(){

string fileName = Request["name"];

string fileRelName = fileName.Substring(0, fileName.LastIndexOf('.'));//设置临时存放文件夹名称
int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
var guid = Request["guid"];//前端传来的GUID号
var dir = Server.MapPath("~/Upload/Temp");//文件上传目录
dir = Path.Combine(dir, fileRelName);//临时保存分块的目录
if (!System.IO.Directory.Exists(dir))
System.IO.Directory.CreateDirectory(dir);
string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突
var data = Request.Files["file"];//表单中取得分块文件
//if (data != null)//为null可能是暂停的那一瞬间
//{
data.SaveAs(filePath);//报错
//}
return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考
}

public ActionResult Merge(){

var guid = Request["guid"];//GUID
var uoliadTemp= Server.MapPath("~/Upload/Temp");
var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹
var fileName = Request["fileName"];//文件名
string fileRelName = fileName.Substring(0, fileName.LastIndexOf('.'));
var dir = Path.Combine(uoliadTemp, fileRelName);//临时文件夹

var Filepath = Path.Combine(uploadDir, DateTime.Now.ToString("yyyyMMdd"),guid);
if (!System.IO.Directory.Exists(Filepath))
System.IO.Directory.CreateDirectory(Filepath);

var files = System.IO.Directory.GetFiles(dir);//获得下面的所有文件

var finalPath = Path.Combine(Filepath, fileName);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)

var fs = new FileStream(finalPath, FileMode.Create);

foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write{
	var bytes = System.IO.File.ReadAllBytes(part);
	fs.Write(bytes, 0, bytes.Length);
	bytes = null;
	System.IO.File.Delete(part);//删除分块
}
fs.Flush();
fs.Close();
System.IO.Directory.Delete(dir);//删除文件夹
return Json(new { error = 0 });//随便返回个值,实际中根据需要返回
}
用户评价