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 相关文章推荐
图片完美缩放
Sep 07 Javascript
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
JS实现炫酷轮播图
Nov 15 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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python之web模板应用
2017/12/26 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
写自荐信三大法宝
2014/01/24 职场文书
教师个人鉴定材料
2014/02/08 职场文书
《落花生》教学反思
2014/02/25 职场文书
绿色城市实施方案
2014/03/19 职场文书
初中地理教学反思
2016/02/19 职场文书
《社戏》教学反思
2016/02/22 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS