Js拖拽图片上传，拖拽添加附件

2024-09-05 12:18:26

字体：大中小

来源：转载

供稿：网友

有空时候做的一个Js图片拖拽功能，将指定图片或文件拖拽到指定区域，即可实现选择文件的功能，用户可不使用文件域，就可选择文件。类似腾讯QQ邮箱的文件拖拽功能，其实没有没这个功能无可厚非，这里主要是探讨一下这个功能的实现。友情提示：请使用火狐或chrome浏览。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>拖拽图片上传</title><style><style>*{ margin:0; padding:0}body{ background:#000}#containner{  margin:0 auto; padding:20px; background:#eee; overflow:hidden;position:relative }#uploadready{ border:2px dashed #ccc; border-radius:3px; float:right; width:100%;background:url(/jscss/demoimg/201207/tipsword.png) center center no-repeat #f8f8f8; text-align:left}#uploadready h2{ text-align:center; background:#f8f8f8; border-bottom:1px solid #ddd; padding:10px 0; color:#555; font-size:16px}#uploadready #dropbox{ height:480px; overflow-y:auto;}#uploadready li{border: 1px solid #DDDDDD;    float: left;    font-size: 12px;    height: 290px;    line-height: 1.6;    list-style: none outside none;    padding: 10px;    position: relative;	margin:10px 0 0 10px;	overflow:hidden;	box-shadow:2px 2px 2px #ddd;	-moz-box-shadow:2px 2px 2px #ddd ;	-webkit-box-shadow:2px 2px 2px #ddd }#uploadready li p{ background:#F9F4E6; color:#090; padding:1px 4px; cursor:text; word-break:break-all;overflow:hidden; text-overflow:ellipsis;   border-left:#ccc; border-top:#ccc; border-right:#ddd; border-bottom:#ddd; border-width:1px; border-style:solid}#uploadready li p:focus{ background:#FC9}.img_and_info img:hover{ cursor:pointer; opacity:.8}#uploadready li span{ display:none; position:absolute; left:50%; top:50%; text-indent:-9999px; background:url(images/delete_x.png); margin-left:-32px; margin-top:-32px; cursor:pointer;  width:64px; height:64px}#uploadready li:hover span{ display:block}.title{ width:628px; height:38px; font-family:'微软雅黑';  font-size:18px; margin-bottom:10px; padding-left:10px}.source{  border:1px solid #666; background:#FFC; cursor:pointer; padding:5px 12px; font-size:12px; float:left; margin-top:5px}#uploadView{ min-height:100px;background:#fff; border:10px solid #ddd;}#dropbox img{ display:block; margin:20px auto 5px}#dropbox ul { padding:0; margin:0}progress {    background-color: #EEEEEE;border:none;    border-top: 1px solid #ccc;    bottom: 0;    height: 2px;    left: 0;    position: absolute;	width:100%}  progress::-webkit-progress-bar {    background-color: #d7d7d7;}  progress::-webkit-progress-value {    background-color: #f00;}.box-shadow{	box-shadow:0px 0px 8px #999 inset;               /* For Firefox3.6+ */	-webkit-box-shadow:5px 5px 5px #999 inset;   	background:#f8f8f8         /* For Chrome5+, Safari5+ */}#upload_btn{ width:100%; height:38px; font-size:18px;}#dropbox img{ background:url('/jscss/demoimg/loading.gif') enter center no-repeat; max-width:230px; max-height:230px}#dropbox ul{ mix-height:0px}.btns{ clear:both; padding:8px 0}.btns input{ padding:5px 20px; margin-right:10px }</style></head><body><div id="containner">        <div id="uploadready">        <form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">        <h2 style="position:relative">        <input type="button" value="浏览图片" style=" position:absolute; cursor:pointer; left:45px; top:-8px; width:200px">        <input style="opacity:0; position:absolute; cursor:pointer; left:30px; top:-8px" name="" type="file" multiple="true" onchange="dropHandler(this.files)"   />        </h2>      <div id="dropbox">        <ul id="pageContent"></ul>        <ul id="uploaded"></ul> </div><input type="button" style="display:none" id="upload_btn" value="上 传" />   </form>        </div> </div><div id="uploadView"></div><script type="text/javascript">	function $(id) {		return document.getElementById(id);	}	function Output(msg) {		var m = $id("messages");		m.innerHTML = msg + m.innerHTML;	}var oDragWrap =$('uploadready');//拖进oDragWrap.addEventListener('dragenter', function(e) {　e.preventDefault();  $('dropbox').className='box-shadow';}, false);//拖离oDragWrap.addEventListener('dragleave', function(e) {  $('dropbox').className='';}, false);//拖来拖去 oDragWrap.addEventListener('dragover', function(e) {　e.preventDefault();}, false);//扔下oDragWrap.addEventListener('drop', function(e) {e.stopPropagation(); e.preventDefault();var files = e.target.files || e.dataTransfer.files;dropHandler(files)}, false);var arrFiles=[];var dropHandler = function(files) {  $('pageContent').className='';$('upload_btn').style.display='block';for(var f=0;f<files.length;f++){		if(files[f].type.indexOf("image")==-1){		alert('文件' + files[f].name + '不是图片。')		}		else{			arrFiles.push(files[f]);			//console.log('files['+f+'].index'+files[f].index)						}	}            $('pageContent').innerHTML='';   for(var i=0; i';		  html += '<img  border="0" src="'+imgsrc+'">';		  html += '</div>';		  html += ' <p class="imginfo" contenteditable="true">上传完毕</p>';          uploadLi.innerHTML=html;          var oldLi=$('imgViewList'+files.index);		   $('pageContent').removeChild(oldLi);	   $('uploaded').appendChild(uploadLi);   	  var bbscode='';	       bbscode+='[img]/000/uploads/'+files.name+'[/img]<br/>'          $('uploadView').innerHTML+=bbscode;		}			};		       xhr.open("POST",'upload.php', true);			xhr.setRequestHeader("X_FILENAME", files.name);			xhr.send(files);	  }  	  // ajaxUpload();function viewfile(file){	if(window.webkitURL){			var	imgsrc=window.webkitURL.createObjectURL(file)createView(file,imgsrc)				}	else if(window.URL){				var	imgsrc=window.URL.createObjectURL(file)	createView(file,imgsrc)		}		else{			   var reader = new FileReader();　reader.onload = function(e) {	var	imgsrc=e.target.result;     createView(file,imgsrc)　}  reader.readAsDataURL(file);  }  	}	//创建预览dom	function createView(file,imgsrc){				  var html = "";		  html += '<li id="imgViewList'+file.index+'">';		  html += '<div class="img_and_info">';		  html += '<img  border="0" src="'+imgsrc+'">';		  html += '</div>';		  html += '<span onclick="del(/'imgViewList'+file.index+'/')" class="upload_delete" title="删除">删除</span>'              html += '<progress value="0" max="100" id="progress'+file.index+'"></progress>'; 		  html += '</li>';  $('pageContent').innerHTML+=html;					}Array.prototype.del=function(n) {　//n表示第几项，从0开始算起。　if(n<0){　//如果n<0，则不进行任何操作。　　return this;}　else{　　return this.slice(0,n).concat(this.slice(n+1,this.length));}}	//删除预览  function del(obj){	   var n=parseInt(obj.substring(11));//获取数组索引	 console.log('数组长度为：'+arrFiles.length);	   for(var s=0;s</body></html>

上一篇：SliderBar滑动条，网页滑块代码

下一篇：页边栏浮动条+动态返回顶部的JS效果