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 相关文章推荐
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 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
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
php微信开发之谷歌测距
2018/06/14 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python关闭占用端口方式
2019/12/17 Python
Python3读写ini配置文件的示例
2020/11/06 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
英语演讲稿范文
2014/01/03 职场文书
社区戒毒工作方案
2014/06/04 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
CSS 圆形进度栏
2021/04/06 HTML / CSS
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers