这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现拖拽上传图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
直接把本地图片拉到你设定的图片上传成功后的位置,就 ok 了,具体代码如下
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 标题
- </title>
- <meta name="keywords" content="">
- <meta name="description" content="">
- <style>
- *{margin:0; padding:0; list-style:none;} #box{ width: 600px; height: 300px;
- background: #ccc; padding: 50px; }
- </style>
- </head>
- <body>
- <div id="box">
- </div>
- <script>
- var box = document.getElementById('box');
- box.ondragover = function(e) {
- e.preventDefault();
- }
- box.ondrop = function(e) {
- e.preventDefault();
- // console.log(e.dataTransfer.files[0]);
- var f = e.dataTransfer.files[0]; //获取到第一个上传的文件对象
- var fr = new FileReader(); //实例FileReader对象
- fr.readAsDataURL(f); //把上传的文件对象转换成url
- fr.onload = function(e) {
- console.log(e);
- // var Url=e.target.result;//上传文件的URL
- var Url = this.result; //上传文件的URL
- box.innerHTML += '<img src="' + Url + '" alt="">';
- }
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0815/343905.html