中成网站建设
    成都做网站,就选中成网站建设!专业四川网站建设,成都网站建设服务提供商
            企业宣传网站建设、电子商务网站建设、OA办公系统。联系电话:028-66165255
    资讯列表  
 HTML5文件实现拖拽上传
    资讯详情  
HTML5文件实现拖拽上传(2)
发布时间:2010-09-12 【加入收藏】

其中最主要的是drop事件中用handleFiles()依次处理所有文件

Js代码

handleFiles = function(files) { 
    for (var i = 0; i < files.length; i++) { 
        var file = files[i]; 
 
    } 

对于图片类型的文件可以直接读取内容,显示预览图

Js代码

if (!file.type.match(/image*/)) { 
    continue; 

 
var img = document.createElement("img"); 
img.classList.add("obj"); 
img.file = file; 
preview.appendChild(img); 
 
var reader = new FileReader(); 
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
reader.readAsDataURL(file); 

接下来就是核心功能:ajax上传。首先新建一个XHR请求

Js代码

var xhr = new XMLHttpRequest(); 
xhr.open('post', '/file/upload', true); 

 
上一篇:采集安全数据前要确认的十个问题
下一篇:企业网站靠什么体现企业形象 靠首页FLSAH吗?
【打印】    【关闭】    【字体变小】    【字体变大】
首页  |  建站学院  |  网站建设  |  成功案例  |  业务体系  |  软件定制  |  解决方案  |  联系我们  |  免责声明
中成网建公司地址:四川省成都市双楠双安东巷1号18-3-5 电话:028-6616 5255 版权所有 @ 中成网建
成都网站建设网址:www.csccd.net www.csccd.cn 邮箱:web#csccd.net
信息产业部备案号:蜀ICP备08106559号