Html5上传插件封装
时间:2022-04-22
本文章向大家介绍Html5上传插件封装,主要内容包括1.创建标签、2.封装上传插件、3.调用封装的控件、4.控制器接收文件并且保存(简单实现)、5.效果演示、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前段时间将flash的上传控件替换成使用纯js实现的,在此记录
1.创建标签
<div class="camera-area" style="display:inline-block;float:left">
<input type="file" id="UploadFile" name="fileToUpload" class="fileToUpload" style="float:left;width:auto;padding:10px 0" />
<div class="upload-progress"></div>
<div class="thumb">
<img id="myPhoto" />
</div>
</div>
div内部有3个标签 第一个是上传,第二个是上传进度,第三个为了上传的预览
2.封装上传插件
//拓展
$.extend($.fn, {
fileUpload: function (opts) {
this.each(function () {
var $self = $(this);
var doms = {
"fileToUpload": $self.find(".fileToUpload"),
"thumb": $self.find(".thumb"),
"progress": $self.find(".upload-progress")
};
var funs = {
//选择文件,获取文件大小,也可以在这里获取文件格式,限制用户上传非要求格式的文件
"fileSelected": function () {
var files = (doms.fileToUpload)[0].files;
var count = files.length;
for (var index = 0; index < count; index++) {
var file = files[index];
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
funs.uploadFile();
},
//异步上传文件
uploadFile: function () {
var fd = new FormData();//创建表单数据对象
var files = (doms.fileToUpload)[0].files;
var count = files.length;
for (var index = 0; index < count; index++) {
var file = files[index];
fd.append(opts.file, file);//将文件添加到表单数据中
funs.previewImage(file);//上传前预览图片,也可以通过其他方法预览txt
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度
xhr.addEventListener("load", funs.uploadComplete, false);
xhr.addEventListener("error", opts.uploadFailed, false);
xhr.open("POST", opts.url);
xhr.send(fd);
},
//文件预览
previewImage: function (file) {
var gallery = doms.thumb;
var img = document.createElement("img");
img.file = file;
doms.thumb.html(img);
// 使用FileReader方法显示图片内容
var reader = new FileReader();
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
},
uploadProgress: function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
doms.progress.html(percentComplete.toString() + '%');
}
},
"uploadComplete": function (evt) {
var returnModel = JSON.parse(evt.target.responseText);
if (returnModel.url) {
$("#" + opts.id).val(returnModel.url);
}
if (!returnModel.success) {
alert(returnModel.msg);
$(".upload-progress").html("0%");
$(".thumb img").attr("src", "");
$("#" + opts.id).val("");
}
}
};
doms.fileToUpload.on("change", function () {
doms.progress.find("span").width("0");
funs.fileSelected();
});
});
}
});
3.调用封装的控件
$(".camera-area").fileUpload({
"url": "/Home/SavePhoto",
"file": "fileName",
"id": "Photo"
});
url:上传的位置
file:后台接收此文件的参数
id:当前是冗余拓展,博主本意是上传到服务器后返回个url,url指向上传文件的服务器路径
4.控制器接收文件并且保存(简单实现)
[HttpPost]
/// <summary>
/// 上传文件
/// </summary>
/// <returns></returns>
public ActionResult SavePhoto()
{
//fileName要和视图的插件参数一致
HttpPostedFileBase file = HttpContext.Request.Files["fileName"];
string savePath = Path.Combine(Server.MapPath("~/Temp/"), DateTime.Now.Year.ToString(), DateTime.Now.Month.ToString());
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + Path.GetExtension(file.FileName);
fileName = Path.Combine(savePath, fileName);
file.SaveAs(fileName);
return this.Json(new { success = true });
}
5.效果演示
- Visual Round Trip Analyzer
- ASP.NET可以在Windows Server 2008 R2 Server Core上运行
- SOA十大设计原则
- 中国人民大学文继荣:大数据的经验主义解释
- 检查Python对象
- 分布式监控系统Zabbix-3.0.3-完整安装记录(6)-微信报警部署
- Android 命名规范 (提高代码可以读性)
- Msdn 杂志 asp.net ajax 文章汇集
- 分布式监控系统Zabbix-3.0.3-完整安装记录-新报微信报警(企业微信)
- 测试网站页面网速的一个简单Python脚本
- 框架页面尽可以这么用(后置代码中控制框架)
- 微信小程序「学科排名」发布了
- Nginx 负载均衡的Cache缓存批量清理的操作记录
- DotNet软件开发框架
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- uni-app搜索历史记录功能实现
- [903]linux文件删除后磁盘空间没有释放
- Spring如何实现AOP,请不要再说cglib了!
- Redis安装问题解决方案
- 高效的5个pandas函数,你都用过吗?
- jz2440重新分区
- 腾讯云TCB云函数趣应用:巧用 puppeteer 五分钟实现一个云加社区个人成就爬虫
- NFS挂载的2种方式
- Angular Component 开发时属性和运行时属性的对照
- 第002课 ubuntu环境搭建和ubuntu图形界面操作(免费)
- 爆破cobalt strike密码脚本
- 第003课 linux入门命令详解
- 第004课 vi编辑器的使用详解
- 【前端JQ】jQuery赋值checked的几种写法,attr()方法不好使,建议使用prop()方法。
- 达梦数据库适配问题