js实现文件拖拽上传并显示待上传的文件列表

此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload

首先实现html页面的内容:

<body><div name="single" style="text-align: center; "><A class=btn_addPic href="javascript:void(0);"><SPAN>选择文件</SPAN><input  id="file"  class="filePrew" type="file" name="file" multiple="multiple" οnchange="javascript:onc();" /></A></div>  <div name="dropbox" id="dropbox" style="font-size:30px;color:#333333;background-color:#888888;min-width:300px;min-height:100px;border:3px dashed silver;"><p style="line-height: 100px;">拖拽文件上传</p></div>  <div style="text-align: center; "><button class="button" type="submit" οnclick="javascript:Upload();">上传</button></div>  <div id="fileliststring" style="background-color:#cccccc;  color:#333333; "></div></body>

这里定义了4个div

第一个是点击按钮选择要上传的文件

第二个为拖拽上传

第三个为上传按钮

第四个用来先显示待上传的文件列表

下面来实现js代码:

定义一个便用用来保存待上传的文件列表:

    var uploadFiles = new Array();

使用jquery方法阻止浏览器的默认行为，并获取文件列表:

    $(function(){ //阻止浏览器默认行为。 $(document).on({ dragleave:function(e){    //拖离 e.preventDefault(); }, drop:function(e){  //拖后放 e.preventDefault(); }, dragenter:function(e){    //拖进 e.preventDefault(); }, dragover:function(e){    //拖来拖去 e.preventDefault(); } }); var box = document.getElementById('dropbox'); //拖拽区域 box.addEventListener("drop",function(e){ e.preventDefault(); //取消默认浏览器拖拽效果 var fileList = e.dataTransfer.files; //获取文件对象 //检测是否是拖拽文件到页面的操作 if(fileList.length == 0){ return false; } AddFiles(fileList);},false); });

然后写一个方法，用来处理待上传的文件列表:

    function AddFiles(files){var errstr = "";for(var i=0; i< files.length; i++){var filename = files[i].name;var isfind = false;for(var j=0; j< uploadFiles.length; j++){if(uploadFiles[j].name == filename){isfind = true;break;}}var index1=filename.lastIndexOf(".");  var index2=filename.length;var postf=filename.substring(index1+1,index2);//后缀名  var myarray = new Array('JPG','jpg','jpeg','JPEG','gif','GIF','png','PNG');if($.inArray(postf,myarray) == -1){errstr += filename + "/";continue;}if(isfind == false){uploadFiles.push(files[i]);}}if(errstr != ""){alert("文件格式错误:"+errstr);}var fileliststring = "";for(var j=0; j< uploadFiles.length; j++){fileliststring += uploadFiles[j].name + " 大小:" + (uploadFiles[j].size / 1000) + "k" + "</br>";}document.getElementById("fileliststring").innerHTML=fileliststring;}

这个方法的参数传入的是html中的文件列表

这里使用一个数组来存放可以上传的文件类型，可以根据自己的需求来修改，如果上传了非法的文件会弹出提示。

然后是选择文件的回调方法:

    function onc(){var files = document.getElementById("file").files;if(files.length < 0){return ;}AddFiles(files);}

最后是上传的方法:

    function Upload(){AddFiles(new Array());if(uploadFiles.length <= 0){Refresh();return;}uploadcount = uploadFiles.length ;var FileController = "SaveFile.php";                    // 接收上传文件的后台地址// FormData 对象var form = new FormData();form.append("file", uploadFiles[0]); // XMLHttpRequest 对象var xhr = new XMLHttpRequest();xhr.open("post", FileController, true);xhr.onload = function () {Upload();};xhr.send(form);uploadFiles.splice(0,1);}

其中SaveFile.php为后台接收上传文件的脚本.

这里首先判断文件列表中的文件是否有文件，有文件则上传并把上传文件从列表中删除，上传结束后继续调用上传方法继续上传后面的文件，直到所有文件都上传完成，会刷新一次当前页面。

这是后台接收文件的php脚本SaveFile.php：

<?php   $file = $_FILES['file'];//得到传输的数据if($file != null){//得到文件名称$name = $file['name'];$names = explode('.',$name); if(count($names) < 2){exit();}$allow_type = array('JPG','jpg','jpeg','JPEG','gif','GIF','png','PNG'); //定义允许上传的类型//判断文件类型是否被允许上传if(in_array($names[count($names)-1], $allow_type)){move_uploaded_file($file['tmp_name'],"file/".$file['name']);}}
?>

这个很简单，就是将上传的文件存缓存位置复制到目标位置.这里同样也会对上传的文件格式进行判断。

下面来看下效果:

这时我们就可以从后台的file文件夹中看到我们刚刚上传的文件了：

js实现文件拖拽上传并显示待上传的文件列表相关推荐

如何显示服务器上的图片,显示服务器上的图片怎么写
显示服务器上的图片怎么写内容精选换一换内容审核服务输入图片参数"Image"是图片的base64编码,本节介绍利用谷歌浏览器进行图片格式转换,获取图片的base64编码信息. ...
收藏个支持进度条与文件拖拽上传的js File Uploader
File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本分类: JavaScript 2012-03-11 19:20 2028人阅读评论(11) 收藏举报目录(?)[+] ...
dropzone.js应用java_拖拽文件上传（Java篇）dropzone.js的简单使用
java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzon ...
php拖拽上传_JS实现的文件拖拽上传功能示例
本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: www.ddpool.cn JS文件拖拽上传 div{ width: 300px; height: 300px; borde ...
dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
html拖动文件读取文件内容,HTML5新功能之文件拖拽上传
当我们使用邮箱添加附件时,会看到提示我们将文件放到相应区域,如图: 当我们将拖拽文件悬停在相应区域后会进一步提示我们,放下鼠标,如图: 下面我们将进一步的了解下此过程,并实现该效果. 首先我们先了解下 ...
js控制文件拖拽，获取拖拽内容。
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
js控制文件拖拽，获取拖拽内容
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...
将文件拖拽到.py文件上以处理它(从DropHandler说起)
原来在Win7下写了一个python程序用来处理文本(txt)文件. 通过捕捉sys.argv文件来获取输入txt文文件的名称.升级到win10后发现通过拖拉txt文件到py文件上的方法失效了.拖拽后 ...

js实现文件拖拽上传并显示待上传的文件列表

js实现文件拖拽上传并显示待上传的文件列表相关推荐

最新文章

热门文章