优化HTML结构
在上回咱们搞定了不用小插件就能传照片后，我就发现那些加了li标签的HTML列表有点儿麻烦。为了让代码看起来更舒服点儿，我就在p#template里单独写了显示元素的那部分，然后默认为隐藏着。这么弄的好处就是可以省去好多在JavaScript里反复弄这个标签那个属性的功夫。你想，要是遇见那种设计得花里胡哨的HTML元素，这招儿肯定能让代码变得清爽多了，还方便以后维护。
我们优化了HTML结构，让代码更好读好懂也好维护！把需要展示的东西单独分离出来，代码就变得一目了然，无须再费劲地去做重复劳动。而且，这也是遵循优秀编程习惯的做法，在团队合作开发时能使大家的代码保持一致，更有序。
JavaScript代码优化
这次改善里，我们顺便给JavaScript代码做了个小整容，注释写得更清楚明了，还配上了闭包这个神秘武器，防止大家乱动所有方法和变量。几乎所有的东西都是以前缀_开始的，就是告诉你这是咱们家悄悄藏起来的私事儿，外面的人就别好奇。除了那个init函数，其他可都留给咱们自己用！
全局方式就是用名字空间来防止跟别的JS文件中的变量重复造成乱套。这样编程维护起来容易多了，而且还能方便地进行扩展。让各个部份更独立。
File API介绍
我们刚才讲到JS里面要用到这个HTML文件API，我现在来给你简单地说说什么是File对象和FileReader对象。
/**
* User: zhy
* Date: 14-6-16
* Time: 下午11:06
*/
var ZhangHongyang = {};
ZhangHongyang.html5upload = (function ()
{
var _ID_UPLOAD_BOX = "uploadBox";
var _CLASS_PROGRESS = "progress";
var _CLASS_PERCENTAGE = "percentage";
var _tip_no_drag = "将文件拖拽至此区域，即可上传！";
var _tip_drag_over = "释放鼠标立即上传！";
var _uploadEle = null;
/**
* 初始化对象与事件
* @private
*/
function _init()
{
_uploadEle = document.getElementById(_ID_UPLOAD_BOX);
_uploadEle.ondragenter = _onDragEnter;
_uploadEle.ondragover = _onDragOver;
_uploadEle.ondragleave = _onDragLeave;
_uploadEle.ondrop = _onDrop;
_setStatusNoDrag();
};
/**
* 正在拖拽状态
* @private
*/
function _setDragOverStatus()
{
if (_checkContatinsElements())return;
_uploadEle.innerText = _tip_drag_over;
_uploadEle.style.border = "2px dashed #777";
$(_uploadEle).css({lineHeight: $(_uploadEle).height() + "px"});
}
/**
* 初始化状态
* @private
*/
function _setStatusNoDrag()
{
if (_checkContatinsElements())return;
_uploadEle.innerText = _tip_no_drag;
_uploadEle.style.border = "2px dashed #777";
$(_uploadEle).css({lineHeight: $(_uploadEle).height() + "px"});
}
/**
* 上传文件
* @private
*/
function _setDropStatus()
{
if (_checkContatinsElements())return;
_uploadEle.innerText = "";
_uploadEle.style.border = "1px solid #444";
$(_uploadEle).css({lineHeight: "1em"});
$(_uploadEle).append("
");
};
/**
* 判断是否已经上传文件了
* @private
*/
function _checkContatinsElements()
{
return !!$(_uploadEle).find("li").size();
}
/**
* 当ondragenter触发
* @private
*/
function _onDragEnter(ev)
{
_setDragOverStatus();
}
/**
* 当ondargmove触发
* @private
*/
function _onDragOver(ev)
{
//ondragover中必须组织事件的默认行为，默认地，无法将数据/元素放置到其他元素中。
ev.preventDefault();
}
/**
* 当dragleave触发
* @private
*/
function _onDragLeave(ev)
{
_setStatusNoDrag();
}
/**
* ondrop触发
* @private
*/
function _onDrop(ev)
{
//drop 事件的默认行为是以链接形式打开，所以也需要阻止其默认行为。
ev.preventDefault();
_setDropStatus();
//拿到拖入的文件
var files = ev.dataTransfer.files;
var len = files.length;
for (var i = 0; i < len; i++)
{
//页面上显示需要上传的文件
_showUploadFile(files[i]);
}
}
/**
* 页面上显示需要上传的文件
* @private
*/
function _showUploadFile(file)
{
var reader = new FileReader();
// console.log(file)
// console.log(reader);
//判断文件类型
if (file.type.match(/image*/))
{
reader.onload = function (e)
{
var formData = new FormData();
var li = $("#template li").clone();
var img = li.find("img");
var progress = li.find(".progress");
var percentage = li.find(".percentage");
percentage.text("0%");
img.attr("src", e.target.result);
$("ul", $(_uploadEle)).append(li);
$(_uploadEle).find("li").size() == 10 && $(_uploadEle).width(($(_uploadEle).width() + 8) + "px").css("overflow", "auto");
formData.append("uploadFile", file);
//上传文件到服务器
_uploadToServer(formData, li, progress, percentage);
};
reader.readAsDataURL(file);
}
else
{
console.log("此" + file.name + "不是图片文件！");
}
}
/**
* 上传文件到服务器
* @private
*/
function _uploadToServer(formData, li, progress, percentage)
{
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8080/strurts2fileupload/uploadAction", true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest', 'Content-Type', 'multipart/form-data;');
//HTML5新增的API，存储了上传过程中的信息
xhr.upload.onprogress = function (e)
{
var percent = 0;
if (e.lengthComputable)
{
//更新页面显示效果
percent = 100 * e.loaded / e.total;
progress.height(percent );
percentage.text(percent + "%");
percent >= 100 && li.addClass("done");
}
};
xhr.send(formData);
}
//把init方法公布出去
return{
init: _init }
})();
你知道File对象吗？它能告诉我们很多关于一个文件的信息，比如最后修改日期~名字~大小~类型等等。如果你正在使用一个兼容HTML5的浏览器，你甚至可以让这个对象帮你显示或者判断文件内容！
这个FileReader工具主要就是用来帮我们把文件给同步读出来的。有个叫readAsDataURL的办法能直接帮你把文件里的东西变成图片等形式的Data URI，看起来非常直观明了。还有些别的方法帮忙读出文件里边有关文字和二进制数据的部分，当然，也少不了各种事件处理函数。
利用File API，咱们就能更随心所欲地处理用户传上来的文件了，同时还能在网站上添加各种实用功能和互动特效！
页面调用与完成
终于搞定！现在你们可以用无插件的方式轻松把照片拖上我们这儿，而且上传过程真的很简单。上手快得起飞，无论你是想展示还是编辑文件，都没问题~
这个项目搞完了以后，大家都觉得好使多！简单易用又好用，特别是那个文件上传的功能，简直了。就是靠着HTML5、CSS3还有JavaScript这些高大上的技术，把它弄得这么好用。
咱们来讲讲无插件拖拽上传图片项目的优化过程和用到的那些技术！简单来说就是更新了HTML结构、让JavaScript代码更简单易懂，还用上了File API，这样就能让用户用得舒服点，功能也能更好地体现出来。
评论0