JS拖拽上传

最新推荐文章于 2023-12-13 17:26:23 发布

nece001

最新推荐文章于 2023-12-13 17:26:23 发布

阅读量240

点赞数

分类专栏： JavaScript 文章标签： js ondrop

本文链接：https://blog.csdn.net/nece001/article/details/103204918

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

示例代码：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>拖入上传</title>
		<style type="text/css">
			body {text-align:center}
			#box {margin:0 auto;width:500px;height:300px; border:1px dashed red; text-align:center;overflow:auto}
			#box ul {padding:0;margin:0}
			#box li {padding:2px;margin:5px;float:left;width:100px;height:200px;overflow:hidden;border:1px solid #CCC}
			#box li img {width:100px}
		</style>
	</head>
	<body>
		<h2>Chrome / FireFox 测试可用</h2>
		<div id="box">
			拖入上传
		</div>
		<input type="button" value="上传" onclick="du.upload()">
		<input type="button" value="清空" onclick="du.clear()">

		<script type="text/javascript">

		    /**
			 * @param HtmlElement el 显示上传文件列表的HTML元素
			 * @param string field 文件上传域的名称
			 * @param string url 文件上传提交的服务地址
			 */
			var DropUpload = function(el, field, url){
				var _ = this;
				_.files = {};

				var con = document.createElement('div');
				var sel = document.createElement('input');
				sel.type = 'file';
				sel.multiple = true;
				con.appendChild(sel);
				sel.onchange = function(){
					_.addFile(this.files);
					_.showList();
				}

				el.parentNode.insertBefore(con, el);

				// 禁止默认事件
				el.ondragenter = function(e) {e.preventDefault();}
				el.ondragleave = function(e) {e.preventDefault();}
				el.ondragover = function(e) {e.preventDefault();}

				// 拖拉事件处理
				el.ondrop = function(e){
					e.stopPropagation(); // 解决firefox，会打开新页问题
					e.preventDefault();

					_.addFile(e.dataTransfer.files);
					_.showList();
				}

				this.addFile = function(files){
					var key, file;
					for(var i=0;i<files.length;i++){
						file = files[i];
						key = file.name+file.size+file.type; // 防止重复
						_.files[key] = file;
					}
				}

				this.showList = function(){
					var ul = document.createElement('ul');
					var li, img;
					for(var key in _.files){
						li = document.createElement('li');
						img = document.createElement('img');
						img.src = window.URL.createObjectURL(_.files[key]);

						li.appendChild(img);
						ul.appendChild(li);
					}
					
					if(el.firstChild){
						el.replaceChild(ul, el.firstChild);
					}else{
						el.appendChild(ul);
					}
				}

				this.upload = function(){
					if(_.isEmpty(_.files)){
						var upfiles = [];
						var formData = new FormData();
						for(var key in _.files){
							upfiles.push(_.files[key]);
							formData.append(field, _.files[key]);
						}

						formData.append('upfield_name', field); // 文件上传域的名称

						//console.log(formData.getAll(field));

						var xml = new XMLHttpRequest();
						xml.open("post", url);
						//xml.setRequestHeader('Method', 'Common.Upload.File');
						xml.send(formData);

						xml.onreadystatechange = function() {
							console.log(xml.readyState);
							if(xml.readyState === 4){
								
								alert(xml.responseText);//显示当前页面的代码，不是{“message”, 1}
								_.clear();
								
							}
						}
					}else{
						alert('请选择文件');
					}
				}

				this.clear = function(){
					_.files = {};
					if(el.firstChild){
						el.removeChild(el.firstChild);
					}
				}

				this.isEmpty = function(obj){
					if(typeof obj.length === 'undefined'){
						for(var a in obj){
							return true;
						}
						return false;
					}else{
						return obj.length === 0;
					}
				}
			}

			var du = new DropUpload(document.getElementById('box'), 'upfile[]', 'http://dev.ops/service?method=Common.Upload.File');
		</script>
	</body>
</html>

nece001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS拖拽上传

示例代码：<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>拖入上传</title> <style type="text/css"> body {text-align:center} #box {margin:...
复制链接

扫一扫