本文介绍了使用HTML5和CSS3实现无插件的拖拽上传图片功能，包括预览和批量上传。通过详细的JavaScript代码展示如何处理ondragenter、ondragover、ondragleave、ondrop事件，以及使用FileReader API进行图片预览。文章还提及了文件上传的进度显示和限制上传数量的实现方法。
-
正在拖拽状态
-
@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触发
<
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
