Html5之图片拖放上传

最新推荐文章于 2024-11-15 15:49:15 发布

天涯在身边

最新推荐文章于 2024-11-15 15:49:15 发布

阅读量153

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/liuzidong_liuzidong/article/details/83982773

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

转载：提升用户体验：HTML5 拖放文件上传
[url]http://gandli.blog.163.com/blog/static/3084958420101023274347/[/url]


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
    <title>HTML5 浏览器拖放 | HTML5 Drag and drop</title>
    <style>
		#section{font-family: "Georgia", "微软雅黑", "华文中宋";}
        .container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3px solid #ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
		.preview{max-width:360px;}
		#files-list{position:absolute;top:0;left:500px;}
		#list{width:460px;}
		#list .preview{max-width:250px;}
		#list p{color:#888;font-size:12px;}
		#list .green{color:#09c;}
    </style>
</head>
<body>

    <div id="section">
        <p>把你的图片拖到下面的容器内：</p>

        <div id="container" class="container">

        </div>
		<div id ="files-list">
			<p>已经拖进过来的文件：</p>
			<ul id="list"></ul>
		</div>
    </div>

	<script>

	if (window.FileReader) {

		var list = document.getElementById('list'),
			cnt = document.getElementById('container');

		// 判断是否图片
		function isImage(type) {
			switch (type) {
			case 'image/jpeg':
			case 'image/png':
			case 'image/gif':
			case 'image/bmp':
			case 'image/jpg':
				return true;
			default:
				return false;
			}
		}

		// 处理拖放文件列表
		function handleFileSelect(evt) {
			evt.stopPropagation();
			evt.preventDefault();

			var files = evt.dataTransfer.files;

			for (var i = 0, f; f = files[i]; i++) {

				var t = f.type ? f.type : 'n/a',
					reader = new FileReader(),
					looks = function (f, img) {
						list.innerHTML += '<li><strong>' + f.name + '</strong> (' + t +
							') - ' + f.size + ' bytes<p>' + img + '</p></li>';
						cnt.innerHTML = img;
					},
					isImg = isImage(t),
					img;

				// 处理得到的图片
				if (isImg) {
					reader.onload = (function (theFile) {
						return function (e) {
							img = '<img class="preview" src="' + e.target.result + '" title="' + theFile.name + '"/>';
							looks(theFile, img);
						};
					})(f)
					reader.readAsDataURL(f);
				} else {
					img = '"o((>ω< ))o"，你传进来的不是图片！！';
					looks(f, img);
				}

			}

		}

		// 处理插入拖出效果
		function handleDragEnter(evt){ this.setAttribute('style', 'border-style:dashed;'); }
		function handleDragLeave(evt){ this.setAttribute('style', ''); }

		// 处理文件拖入事件，防止浏览器默认事件带来的重定向
		function handleDragOver(evt) {
			evt.stopPropagation();
			evt.preventDefault();
		}

		cnt.addEventListener('dragenter', handleDragEnter, false);
		cnt.addEventListener('dragover', handleDragOver, false);
		cnt.addEventListener('drop', handleFileSelect, false);
		cnt.addEventListener('dragleave', handleDragLeave, false);

	} else {
		document.getElementById('section').innerHTML = '你的浏览器不支持啊，同学';
	}

	</script>


</body>
</html>