|
<!DOCTYPEHTML>
<html>
<head>
<scripttype="text/javascript">
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>
</body>
</html>
文件拖拽
上面的例子已经使用了dataTransfer的各种方法和属性，下面再看网上的另外一个有趣的应用：拖拽一个图片到网页上，然后在网页上显示。这个应用用到了dataTransfer的files属性。
复制代码 代码如下:
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>HTML5拖放文件</title>
<style>
#section{font-family:"Georgia","微软雅黑","华文中宋";}
.container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3pxsolid#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;}
#listp{color:#888;font-size:12px;}
#list.green{color:#09c;}
</style>
</head>
<body>
<divid="section">
<p>把你的图片拖到下面的容器内：</p>
<divid="container"class="container">
</div>
<divid="files-list">
<p>已经拖进过来的文件：</p>
<ulid="list"></ul>
</div>
</div>
<script>
if(window.FileReader){
varlist=document.getElementById('list'),
cnt=document.getElementById('container');
//判断是否图片
functionisImage(type){
switch(type){
case'image/jpeg':
case'image/png':
case'image/gif':
case'image/bmp':
case'image/jpg':
returntrue;
default:
returnfalse;
}
}
//处理拖放文件列表
functionhandleFileSelect(evt){
evt.stopPropagation();
evt.preventDefault();
varfiles=evt.dataTransfer.files;
for(vari=0,f;f=files[i];i++){
vart=f.type?f.type:'n/a',
reader=newFileReader(),
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){
returnfunction(e){
img='<imgclass="preview"src="'+e.target.result+'"title="'+theFile.name+'"/>';
looks(theFile,img);
};
})(f)
reader.readAsDataURL(f);
}else{
img='"o((>ω<))o"，你传进来的不是图片！！';
looks(f,img);
}
}
}
//处理插入拖出效果
functionhandleDragEnter(evt){this.setAttribute('style','border-style:dashed;');}
functionhandleDragLeave(evt){this.setAttribute('style','');}
//处理文件拖入事件，防止浏览器默认事件带来的重定向
functionhandleDragOver(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中的文件读取API：FileReader对象；该对象提供了下列异步方法用于读取文件：
1.FileReader.readAsBinaryString(fileBlob)
以二进制的方式读取文件，result属性会包含一个文件的二进制的格式
2.FileReader.readAsText(fileBlob,opt_encoding)
以文本的方式读取文件，result属性将会包含一个文件的文本格式，默认解码参数是“utf-8”。
3.FileReader.readAsDataURL(file)
以URL形式读取文件result将会包含一个文件的DataURL格式（图片通常用这种方式）。
当使用上面的方法读取文件后，会触发下列事件：
复制代码 代码如下:
onloadstart，onprogress，onabort，onerror，onload，onloadend
这些事件都很简单，需要的时候挂接就可以了。看下面的代码示例：
复制代码 代码如下:
functionstartRead(){
//obtaininputelementthroughDOM
varfile=document.getElementById('file').files[0];
if(file){
getAsText(file);
}
}
functiongetAsText(readFile){
varreader=newFileReader();
//ReadfileintomemoryasUTF-16
reader.readAsText(readFile,"UTF-16");
//Handleprogress,success,anderrors
reader.onprogress=updateProgress;
reader.onload=loaded;
reader.onerror=errorHandler;
}
functionupdateProgress(evt){
if(evt.lengthComputable){
//evt.loadedandevt.totalareProgressEventproperties
varloaded=(evt.loaded/evt.total);
if(loaded<1){
//Increasetheprogbarlength
//style.width=(loaded*200)+"px";
}
}
}
functionloaded(evt){
//Obtainthereadfiledata
varfileString=evt.target.result;
//HandleUTF-16filedump
if(utils.regexp.isChinese(fileString)){
//ChineseCharacters+Namevalidation
}
else{
//runothercharsettest
}
//xhr.send(fileString)
}
functionerrorHandler(evt){
if(evt.target.error.name=="NotReadableErr"){
//Thefilecouldnotberead
}
}
这里也简单说一下：普通的文件下载使用的就是window.open方法，例如：
复制代码 代码如下: （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
