aardio官方社区

 找回密码
 注册会员

!connect_header_login!

只需一步,快速开始

搜索
查看: 6092|回复: 1

miniblink,拖拽上传文件示例

[复制链接]

188

主题

2544

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14186
发表于 2018-4-2 16:00:42 | 显示全部楼层 |阅读模式
因为miniblink支持HTML5拖拽文件有一点小问题,所以我们自己动手来实现一下这个功能。
这个功能也用到了JS中的ArrayBuffer( 也就是aardio中的buffer  ),如果没有这个东西,稍大一点的文件数据只要一拖放,界面就卡死不能动了。

import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink拖拽上传文件示例";right=1123;bottom=570)
/*}}*/

import web.blink.form;  
var mb = web.blink.form(winform);  

import fsys.mime;
winform.onDropFiles =
function(files){
     mb.window.sendData(
"http://eu.httpbin.org/post"
         ,string.loadBuffer(files[1])
         ,fsys.mime.fromFile(files[1])
         );
}

mb.html =
/**
<!doctype html>
<html>
<head>
     <script type="text/javascript">
     function sendData(url,buffer,type) {
         document.body.innerHTML = `正在努力上传数据:<br><img src="http://cdn.uedna.com/201402/139266266693.gif">`;
         
         var formData  = new FormData();
         var fileData =  new Blob([buffer],{type:type});
         formData.append("file1", fileData );
      
         var xhr = new XMLHttpRequest();
         xhr.open('post',url);
            
         //miniblink尚不支持onprogress
         xhr.upload.onprogress = function(evt){
             if (evt.lengthComputable){
           var percent = evt.loaded / evt.total;
         }   
         }
         
         xhr.onload = function() {
            document.body.innerHTML ="<pre>"+ xhr.responseText + "</pre>";
         }
         
         
         xhr.send(formData);
     }
     </script>
</head>
<body style="background:#f7f7f7">
        拖放文件到这里上传到服务器
</body>
</html>
**/


winform.show()
win.loopMessage();


参考:miniblink后台线程上传大文件(可显示进度)
http://bbs.aardio.com/forum.php?mod=viewthread&tid=31115
回复

使用道具 举报

188

主题

2544

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14186
 楼主| 发表于 2018-6-10 13:13:51 | 显示全部楼层

miniblink现在已经支持fetch上传,演示代码如下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink拖拽上传文件示例";right=1123;bottom=570)
/*}}*/

import web.blink.form;  
var mb = web.blink.form(winform);  

import fsys.mime;
winform.onDropFiles =
function(files){
     mb.window.sendData(
"http://eu.httpbin.org/post"
         ,string.loadBuffer(files[1])
         ,fsys.mime.fromFile(files[1])
         );
}

mb.html =
/**
<!doctype html>
<html>
<head>
     <script type="text/javascript">
     function sendData(url,buffer,type) {
         document.body.innerHTML = `正在努力上传数据:<br><img src="http://cdn.uedna.com/201402/139266266693.gif">`;
         
         var formData  = new FormData();
         var fileData =  new Blob([buffer],{type:type});
         formData.append("file1", fileData );
   
         fetch(url, {
            method: 'POST',
            body: formData
         }).then(function(res){
            return res.text()
         }).then(function(text){
            document.body.innerHTML ="<pre>"+ text + "</pre>";
         } )
     }
     </script>
</head>
<body style="background:#f7f7f7">
        拖放文件到这里上传到服务器
</body>
</html>
**/


winform.show()
win.loopMessage();

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2021-6-24 07:45 , Processed in 0.046835 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表