H5手机端多文件上传预览插件


Posted in Javascript onApril 21, 2017

基于zepto,支持多文件上传,进度和图片预览,用于手机端。

(function ($) {
 $.extend($, {
 fileUpload: function (options) {
 var para = {
 multiple: true,
 filebutton: ".filePicker",
 uploadButton: null,
 url: "/home/MUploadImg",
 filebase: "mfile",//mvc后台需要对应的名称
 auto: true,
 previewZoom: null,
 uploadComplete: function (res) {
  console.log("uploadComplete", res);
 },
 uploadError: function (err) {
  console.log("uploadError", err);
 },
 onProgress: function (percent) { // 提供给外部获取单个文件的上传进度,供外部实现上传进度效果
  console.log(percent);
 },
 };
 para = $.extend(para, options);

 var $self = $(para.filebutton);
 //先加入一个file元素
 var multiple = ""; // 设置多选的参数
 para.multiple ? multiple = "multiple" : multiple = "";
 $self.css('position', 'relative');
 $self.append('<input id="fileImage" style="opacity:0;position:absolute;top: 0;left: 0;width:100%;height:100%" type="file" size="30" name="fileselect[]" ' + multiple + '>');

var doms = {
 "fileToUpload": $self.parent().find("#fileImage"),
 // "thumb": $self.find(".thumb"),
 // "progress": $self.find(".upload-progress")
 };
 var core = {
 fileSelected: function () {
  var files = (doms.fileToUpload)[0].files;
  var count = files.length;
  console.log("共有" + count + "个文件");
  for (var i = 0; i < count; i++) {
  var item = files[i];
  console.log(item.size);
  if (para.auto) {
  core.uploadFile(item);
  }
  core.previewImage(item);
  }
 },

 uploadFile: function (file) {
  console.log("开始上传");
  var formdata = new FormData();

  formdata.append(para.filebase, file);//这个名字要和mvc后台配合

  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", function (e) {

  var percentComplete = Math.round(e.loaded * 100 / e.total);
  para.onProgress(percentComplete.toString() + '%');
  });
  xhr.addEventListener("load", function (e) {
  para.uploadComplete(xhr.responseText);
  });
  xhr.addEventListener("error", function (e) {
  para.uploadError(e);
  });

  xhr.open("post", para.url, true);
  //xhr.setRequestHeader("X_FILENAME", file.name);
  xhr.send(formdata);
 },
 uploadFiles: function () {
  var files = (doms.fileToUpload)[0].files;
  for (var i = 0; i < files.length; i++) {
  core.uploadFile(files[i]);
  }
 },
 previewImage: function (file) {
  if (!para.previewZoom) return;
  var img = document.createElement("img");
  img.file = file;
  $(para.previewZoom).append(img);
  // 使用FileReader方法显示图片内容
  var reader = new FileReader();
  reader.onload = (function (aImg) {
  return function (e) {
  aImg.src = e.target.result;
  };
  })(img);
  reader.readAsDataURL(file);
 }
 }
 doms.fileToUpload.on("change", function () {
 //doms.progress.find("span").width("0");
 console.log("选中了文件");
 core.fileSelected();
 });

 console.log("初始化!");
 //绑定事件

 $(document).on("click", para.filebutton, function () {
 console.log("clicked");
 //doms.fileToUpload.click();
 });
 if (para.uploadButton) {
 $(document).on("click", para.uploadButton, function () {
  core.uploadFiles();
 });
 }
 }
 });
})(Zepto);

简单讲解:上传还是得靠file元素,所以一开始就加了个隐藏的,简单隐藏会有一些问题,有时候不能触发file change事件。所以用了透明度,将父类设置为相对位置。然后通过file的change事件获得需要上传的文件并放入formdata中,再使用xmlHttpRequest发请求。进度条是直接绑定的process事件。文件预览是filereader,另外需要注意的就是filebase参数,对应的是MVC后台上传方法的参数的名称,如果不一致,后台将获取不到file。回调函数就不说了。

[HttpPost]
 public ActionResult MUploadImg(HttpPostedFileBase mfile)
 {
 return UploadImg(mfile, "Mobile");
 }
[HttpPost]
 public ActionResult UploadImg(HttpPostedFileBase file, string dir = "UserImg")
 {
 if (CheckImg(file, imgtypes) != "ok") return Json(new { Success = false, Message = "文件格式不对!" }, JsonRequestBehavior.AllowGet);

 if (file != null)
 {
 var path = "~/Content/UploadFiles/" + dir + "/";
 var uploadpath = Server.MapPath(path);
 if (!Directory.Exists(uploadpath))
 {
  Directory.CreateDirectory(uploadpath);
 }
 string fileName = Path.GetFileName(file.FileName);// 原始文件名称
 string fileExtension = Path.GetExtension(fileName); // 文件扩展名
 //string saveName = Guid.NewGuid() + fileExtension; // 保存文件名称 这是个好方法。
 string saveName = Encrypt.GenerateOrderNumber() + fileExtension; // 保存文件名称 这是个好方法。
 file.SaveAs(uploadpath + saveName);

 return Json(new { Success = true, SaveName = path + saveName });
 }
 return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);

 }

调用:

<div class="page" id="upload">
 <h2>UploadImg</h2>
 <div id="dd" class="filePicker">点击选择文件</div>
 <div id="preview"></div>
</div>
<script>
 $.fileUpload({ filebutton: "#dd", previewZoom: "#preview" });
</script>

扩展到$对象而不扩展到$.fn,是因为zepto中绑定事件的时候后者不方便,传递id或样式名容易绑定。手机端可以自动的调出相机和相册。默认是不预览的图片的,需要制定预览区域,进度条需要自己写样式,只返回了进度值。

同时传2张的效果:

H5手机端多文件上传预览插件

H5手机端多文件上传预览插件

参考了两篇博客:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
全面了解js中的script标签
Jul 04 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 #Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 #Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
ES6新特性七:数组的扩充详解
Apr 21 #Javascript
React中ES5与ES6写法的区别总结
Apr 21 #Javascript
ES6新特性六:promise对象实例详解
Apr 21 #Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 #Javascript
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
js格式化时间的方法
2015/12/18 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
学校火灾防控方案
2014/06/09 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
新闻编辑求职信
2014/07/13 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
中小学生学籍证明
2014/10/25 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
感恩的心主题班会
2015/08/12 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js