Html5之图片拖放下传-HTML教程-爱易网页

Html5之图片拖放下传

日期：2014-05-17　浏览次数：20735 次

Html5之图片拖放上传
转载：提升用户体验：HTML5 拖放文件上传
http://gandli.blog.163.com/blog/static/3084958420101023274347/

<!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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Html5之图片拖放下传

相关资料更多>

推荐阅读更多>