destDom.addEventListener('dragover',function(event){
event.stopPropagation();
event.preventDefault();
},false);
destDom.addEventListener('drop',function(event){
event.stopPropagation();
event.preventDefault();
var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的文件信息 暂时取一个
//console.log(event.dataTransfer.files.item(0).type);
if(!(/^image/.*$/.test(img_file.type)))
{
alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
return false;
}
fReader = new FileReader();
fReader.readAsDataURL(img_file);
fReader.onload = function(event){
destDom.innerHTML='';
destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>';
};
},false);
}
});
</script>
</body>
</html>
使用HTML/CSS/JavaScript在线运行测试工具http://tools.jb51.net/code/HtmlJsRun运行代码，测试效果如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
