HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量

• 当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);</