HTML5技术

文件各种上传,离不开的表单 - 农码一生(3)

字号+ 作者:H5之家 来源:H5之家 2017-07-25 12:00 我要评论( )

后台代码: public string SaveFile(){if (Request.Files.Count 0){Request.Files[0].SaveAs(Server.MapPath(~/App_Data/) + Path.GetFileName(Request.Files[0].FileName));return 保存成功;}return 没有读到文件;

后台代码:

public string SaveFile() { if (Request.Files.Count > 0) { Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName)); return "保存成功"; } return "没有读到文件"; }

第二种,分片上传。和我们之前自己写的效果差不多。
前端代码:

var uploader = WebUploader.create({ //兼容老版本IE swf: '/Scripts/webuploader-0.1.5/Uploader.swf', // 文件接收服务端。 server: '/Webuploader/SveFile2', // 开起分片上传。 chunked: true, //分片大小 chunkSize: 1000000, //上传并发数 threads: 1, // 选择文件的按钮。 pick: '#picker' }); // 点击触发上传 $("#ctlBtn").click(function () { uploader.upload(); }); uploader.on('uploadSuccess', function (file) { alert("上传成功"); });

后台代码:

public string SveFile2() { //保存文件到根目录 App_Data + 获取文件名称和格式 var filePath = Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName); //创建一个追加(FileMode.Append)方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { using (BinaryWriter bw = new BinaryWriter(fs)) { //读取文件流 BinaryReader br = new BinaryReader(Request.Files[0].InputStream); //将文件留转成字节数组 byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length); //将字节数组追加到文件 bw.Write(bytes); } } return "保存成功"; }

我们看到了有个参数threads: 1上传并发数,如果我们改成大于1会怎样?前端会同时发起多个文件片上传。后台就会报错,多个进程同时操作一个文件。
那如果我们想要多线程上传怎么办?改代码吧(主要是后台逻辑)。
前端代码:

//并发上传(多线程上传) var uploader = WebUploader.create({ //兼容老版本IE swf: '/Scripts/webuploader-0.1.5/Uploader.swf', // 文件接收服务端。 server: '/Webuploader/SveFile3', // 开起分片上传。 chunked: true, //分片大小 chunkSize: 1000000, //上传并发数 threads: 10, // 选择文件的按钮。 pick: '#picker' }); // 点击触发上传 $("#ctlBtn").click(function () { uploader.upload(); }); uploader.on('uploadSuccess', function (file) { //上传完成后,给后台发送一个合并文件的命令 $.ajax({ url: "/Webuploader/FileMerge", data: { "fileName": file.name }, type: "post", success: function () { alert("上传成功"); } }); });

后台代码:

public string SveFile3() { var chunk = Request.Form["chunk"];//当前是第多少片 var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(Request.Files if (!Directory.Exists(path))//判断是否存在此路径,如果不存在则创建 { Directory.CreateDirectory(path); } //保存文件到根目录 App_Data + 获取文件名称和格式 var filePath = path + "/" + chunk; //创建一个追加(FileMode.Append)方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { using (BinaryWriter bw = new BinaryWriter(fs)) { //读取文件流 BinaryReader br = new BinaryReader(Request.Files[0].InputStream); //将文件留转成字节数组 byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length); //将字节数组追加到文件 bw.Write(bytes); } } return "保存成功"; } /// <summary> /// 合并文件 /// </summary> /// <param name="path"></param> /// <returns></returns> public bool FileMerge() { var fileName = Request.Form["fileName"]; var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(fileName); //这里排序一定要正确,转成数字后排序(字符串会按1 10 11排序,默认10比2小) foreach (var filePath in Directory.GetFiles(path).OrderBy(t => int.Parse(Path.GetFileNameWithoutExtension(t)))) { using (FileStream fs = new FileStream(Server.MapPath("~/App_Data/") + fileName, FileMode.Append, FileAccess.Write)) { byte[] bytes = System.IO.File.ReadAllBytes(filePath);//读取文件到字节数组 fs.Write(bytes, 0, bytes.Length);//写入文件 } System.IO.File.Delete(filePath); } Directory.Delete(path); return true; }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5图片上传时IOS和Android均显示摄像头拍照和图片选择 - 出岫无心

    html5图片上传时IOS和Android均显示摄像头拍照和图片选择 - 出岫无心

    2017-07-10 10:00

  • Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶 - Mr.聂

    Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手

    2017-07-03 11:00

  • HTML5 进阶系列:文件上传下载 - _林鑫

    HTML5 进阶系列:文件上传下载 - _林鑫

    2017-07-03 10:03

  • 实现excel导入导出功能,excel导入数据到页面中,页面数据导出生成excel文件 - 还是盼盼好

    实现excel导入导出功能,excel导入数据到页面中,页面数据导出生成ex

    2017-07-02 13:00

网友点评
t