相较于之前使用的上传空间的优点:支持html5,不用再安装flash插件,没有大小限制,分片以后上传,上传以后再进行合并。

前端js代码

<script type="text/javascript">
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
var GUID = WebUploader.Base.guid();//一个GUID $(function () {
var $ = jQuery;
var uploader = WebUploader.create({ // 选完文件后,是否自动上传。
auto: false,
// swf文件路径
swf: applicationPath + './Content/Scripts/webuploader/Uploader.swf', // 文件接收服务端。
server: applicationPath + '/QuotationModule/PQuotation_Offer/Upload', // 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#uploadify', chunked: true,//开始分片上传
chunkSize: 2048000,//每一片的大小
formData: {
guid: GUID //自定义参数,待会儿解释
}, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
//$list.append('<div id="' + file.id + '" class="item">' +
// '<h4 class="info">' + file.name + '</h4>' +
// '<p class="state">等待上传...</p>' +
// '</div>');
//alert(11);
var name = file.name; //文件名
var type = fileType(file.name); //文件类型,获取的是文件的后缀
var volume = bytesToSize(file.size); //文件大小格式化 document.getElementById("tt").style.display = "block";
document.getElementById("tt").innerHTML = name + type + "等待上传。。。";
//var oTr = $("<tr></tr>");
//var str = '<td><cite title="' + name + '">' + name + '</cite></td>';
//str += '<td>' + type + '</td>';
//str += '<td>' + volume + '</td>';
//str += '<td id="jintutiao">';
//str += '<span id="baifenbi"></span>0%';
//str += '</td>';
//str += '<td id="uploding">等待上传</td>';
//$(".fileList").html(str) });
var aa = 1;
// 文件上传过程中创建进度条实时显示。
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('上传中');
//$("#uploding").html("上传中"); //$percent.css('width', percentage * 100 + '%'); //if (percentage == 1) {
// aa++;
//}
//if (aa <= 2) {
// var shuzi = percentage * 100;
// $("#baifenbi").html(shuzi.toFixed(2));
//} }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file, response) {
//$('#' + file.id).find('p.state').text('已上传');
$.post('/QuotationModule/PQuotation_Offer/Merge', { guid: GUID, fileName: file.name }, function (data) {
//console.log(data);
//alert(data.filepath); alert("上传成功!");
Loading(false, "文件上传中!");
var address = data.filepath;
$("#attach").val(data.filepath);
$("#attachName").val(data.fileName);
//alert($("#offerAttach").val());
address = address.replace('~', '../../../../');
document.getElementById("tt").style.display = "block";
document.getElementById("tt").innerHTML = "<a href=\"" + address + "\" download=\"" + data.fileName + "\">" + data.fileName + "</a>"; });
}); // 文件上传失败,显示上传出错。
uploader.on('uploadError', function (file) {
alert('上传出错');
}); // 完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete', function (file) {
//$('#' + file.id).find('.progress').fadeOut();
}); //所有文件上传完毕
uploader.on("uploadFinished", function () {
//提交表单 });
//开始上传
$("#ctlBtn").click(function () {
Loading(true, "文件上传中!");
uploader.upload(); }); }); //字节大小转换,参数为b
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'G'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
}; //通过文件名,返回文件的后缀名
function fileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
</script>

后台的C#代码

        [HttpPost]
public ActionResult Upload()
{
string fileName = Request["name"];
string fileRelName = fileName.Substring(, fileName.LastIndexOf('.'));//设置临时存放文件夹名称
int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
var guid = Request["guid"];//前端传来的GUID号
var dir = Server.MapPath("~/Upload");//文件上传目录
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"];//表单中取得分块文件
string extension = data.FileName.Substring(data.FileName.LastIndexOf(".") + ,
(data.FileName.Length - data.FileName.LastIndexOf(".") - ));//获取文件扩展名
//if (data != null)//为null可能是暂停的那一瞬间
//{
data.SaveAs(filePath + fileName);
//}
return Json(new { erron = });//Demo,随便返回了个值,请勿参考
}
public ActionResult Merge()
{
var guid = Request["guid"];//GUID
var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹
var fileName = Request["fileName"];//文件名
string fileRelName = fileName.Substring(, fileName.LastIndexOf('.'));
var dir = Path.Combine(uploadDir, fileRelName);//临时文件夹
var files = System.IO.Directory.GetFiles(dir);//获得下面的所有文件 string fileGuid = CommonHelper.GetGuid; string extension = fileName.Substring(fileName.LastIndexOf(".") + ,
(fileName.Length - fileName.LastIndexOf(".") - ));//获取文件扩展名 string uploadDate = DateTime.Now.ToString("yyyyMMdd");
//string UserId = ManageProvider.Provider.Current().UserId; string virtualPath = string.Format("~/Resource/Document/NetworkDisk/{0}/{1}/{2}{3}", "Offer", uploadDate, fileGuid, "."+extension); var finalPath = Server.MapPath(virtualPath);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
//创建文件夹,保存文件
string path = Path.GetDirectoryName(finalPath);
Directory.CreateDirectory(path);
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, , bytes.Length);
bytes = null;
System.IO.File.Delete(part);//删除分块
}
fs.Flush();
fs.Close();
System.IO.Directory.Delete(dir);//删除文件夹
return Json(new { filepath = virtualPath, fileName = fileRelName });//返回文件存储的路径,以及文件原来的名称
}

使用百度的webuploader进行附件上传的更多相关文章

  1. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  2. ueditor调用其中的附件上传功能

    ueditor实际上是集成了webuploader, 在做内容发布的时候想既有ueditor又有单独的附件上传按钮,这时再加载一个webuploader就显得过于臃肿了,单独利用ueditor的上传功 ...

  3. WebUploader分片断点上传文件(二)

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...

  4. Springmvc file多附件上传 显示 删除操作

    之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图 基于 ...

  5. Selenium+Python附件上传

    在自动化测试过程中,我们会经常遇到附件上传,而附件上传主要分为两种:input型.非input型,我们本章就两种不同类型的上传方式讲解: (1)input型 <input id="tx ...

  6. asp.net结合uploadify实现多附件上传

    1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的 ...

  7. 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  8. tp中附件上传文件,表单提交

    public function tianjia(){ $goods=D('Goods'); if(!empty($_POST)){ if($_FILES['f_goods_image']['error ...

  9. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

随机推荐

  1. Add an Item to the New Action 在新建按钮中增加一个条目

    In this lesson, you will learn how to add an item to the New Action (NewObjectViewController.NewObje ...

  2. Add a Parametrized Action 添加带参数的按钮

    In this lesson, you will learn how to add a Parametrized Action. These types of Actions are slightly ...

  3. iOS中点击按钮跳转到外部浏览器和内部打开

    如图所示,需要实现点击一个按钮,跳转到指定网页: -(void)pushBtnCellClickDeleate{ NSLog(@"跳转"); //在APP内部打开指定网页 UIWe ...

  4. 20个常用的JavaScript字符串方法

    摘要: 玩转JS字符串. 原文:JS 前20个常用字符串方法及使用方式 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 本文主要介绍一些最常用的JS字符串函数. 1. charAt(x ...

  5. PHP清除数组中为0的元素

    array_diff($arr, [0]): // 清除数组中指定元素 $arr = [1,2,3,0,1]; $arr = array_diff($arr, [0]);//输出[1,2,3,1] v ...

  6. 苏州市java岗位的薪资状况(2)

    上一篇已经统计出了起薪最高的top 10: 接着玩,把top 10 中所有职位的详细信息爬取下来.某一职位的详情是这样: 我们需要把工作经验.学历.职能.关键字爬取下来. from urllib.re ...

  7. postman---postman生成测试报告

    做完测试后,都会编写一份测试报告,测试报告中最主要的就是呈现出测试结果,哪些用例通过了,哪些用例没有通过.像postman这么强大的功能也可以自动生成报告,供我们测试同学进行查看,显得更加有B格~~~ ...

  8. JAVA笔试题(全解)

      目录 一. Java基础部分................................................................. 9 1.一个".java& ...

  9. CSP2019 S2滚粗记

    最好分数:100+20+10+64+64+55 最坏分数:100+20+10+64+36+55 咕咕数据分数:100+25+10+64+60+55 CCF官方: 100+35+10+64+36+55= ...

  10. 大学ACM学习笔记

    高斯消元 该来的总会来的系列 int gauss() { for(int i=1;i<=n;i++)//按照列来枚举,当前之前i-1列全消完了 { int k=i; for(int j=i+1; ...