1.插件简介
今天给大家聊聊一个基于JS库zepto开发的、超好用的H5图片上传神器！它能让你轻轻松松一下子上传很多图片，而且还能看到上传的进度~另外，这个插件还有图片预览功能！在我们的手机上，用起来特别方便，让你随心所欲上传各种图片，非常值得推荐！其实我这个灵感就是来源于对经常要用手机传图的生活场景的观察，感觉确实是超级实用哒，希望也能给你们带来一些启发哟~
2.文件上传原理
说到H5的图片上传小程序，首先咱们得懂啥是传文件呗？不就是用那个叫”file”的东西！不管是电脑页还是手机APP，都是这样干的。网站开发的小伙伴们把这个file藏起来，然后让用户点了它来选文件上传。在H5里，我们就用FormData，把文件信息装到请求里去，接着用XMLHttpRequest，发起上传请求。
(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('');
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);
说到手机上传文件预览，我们用FileReader把本地档案读出来然后直接展示给大家看咯。这样，你就可以在上传前瞅一眼选的图对不对~
3.插件实现细节
针对H5图片上传插件的具体实现细节，需要考虑以下几个方面：
-让file隐形:要防止出现冲突问题，就把file弄得看不见，但别忘了它的爸爸还是在那儿，隔壁子还要有个相对定位置置的搞头儿，这样点击才能生效哈。
-拿下文件数据：关注下file元素的变化情况，趁机抓取用户选的文件放到FormData对象里，给上传做个预处理。
-进度条显示：用XMLHttpRequest搞定，让你看着文件上传的进度。
[HttpPost]
public ActionResult MUploadImg(HttpPostedFileBase mfile)
{
return UploadImg(mfile, "Mobile");
}
-看图秀：用FileReader读取你传过来的照片，马上就在这儿看到预览~
4.参数配置与回调函数
用H5图片上传小工具时得留心几个地方：参数设定和回调函数的设置。
-这个fileBase设置很重要，它就是你给后台呼叫文件，然后把数据传过去要用的那几个字符哈。所以，记住，用哪个名字就得和插件里那个啥名字要一模一样，不然数据可传不过去喔！
[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);
}
-回调函数：想怎么设就怎么设，无论是文件上传成功还是失败都能触发相应动作！
5.手机端适配与扩展功能
因为这H5图片上传的小工具主要是用在咱手里的手机上的，所以得牢记下手机的特殊性跟大家用着舒不舒服：
-相机和相册直接搞定：这个小插件能帮你快速启动手机的相机或者相册，随心所欲地拍或选图片上传就行了！
-预览大小定好啦：选定图片后就能直接在上面浏览效果，别提多方便了！
-进度条设计哈：你来负责搞进度条样子，再根据反馈的数字图出来！
UploadImg
点击选择文件
$.fileUpload({ filebutton: "#dd", previewZoom: "#preview" });
6.多张图片同时传输
这个H5图片上传小助手不只能传一张图，你也可以同时发几张！想发哪几张就选哪个呗，然后眼睁睁看着它们一个个地传进去即可。这个一锅端的功能是不是很方便？既节省时间又提升用户使用感~
7.使用方法与注意事项
在调用H5图片上传插件时，需要注意以下几点：
-怎么用？可以直接嵌入到zepto里面，也可以用来替代$.fn！
-绑定简单：用zepto，咱们能通过id或样式直接绑定事件~
-看看效果，控制进度:开发人员要按公司需要来设计好看的预览图和进度条。
8.总结与展望
总的说来，基于zepto的这个H5图片上传工具真是给手机前端开发带来了很大方便，提高了不少工作效率。看了这篇文章的详细解析后，大家应该会对它更加熟悉。还有，等科技越来越发达，这东西肯定还能变得更好用！
。
评论0