搜索
查看: 2636|回复: 2

miniblink,拖拽上传文件示例

[复制链接]

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 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();


回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2018-4-16 15:43:11 | 显示全部楼层
换个思路实现拖拽上传
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink 拖拽上传文件示例")
/*}}*/

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

import inet.http;
import web.multipartFormData;
winform.onDropFiles =
function(files){
   
   
var form = web.multipartFormData();
    form.add(
"username","用户名");
    form.add(
"password","密码");
    form.addFile(
"filename",files[1]);
   
   
//使用miniblink的userAgent,假装是miniblink客户端
    var http = inet.http(userAgent);
    http.disableCookies();
//禁用默认的cookie
    http.disableCache(); //强制刷新
    http.addHeaders ={
        cookie = wb.cookie;
//添加浏览器的cookie
    }
   
    http.onSendBegin =
function(){
        contentLength = form.size();
        
return contentLength;
    }
   
   
var postSize = 0;
    http.onSend =
function(remainSize){
        
var str = form.read(0x2000);
        
if(!#str)return;
        postSize = postSize + #str;
        wb.document.write(
"<br>总大小:" + contentLength +" 已上传:" + postSize + " 剩余:" + remainSize-#str);
        win.delay(10)
        
return str;
    }
   
    wb.document.body.innerHTML =
`<img src="http://cdn.uedna.com/201402/139266266693.gif">`;
    win.delay(1000);
   
   
var json = http.post("http://eu.httpbin.org/post",,{ ["Content-Type"] = form.contentType() }  );
    wb.document.body.innerHTML =
"<pre>"+json+"</pre>";
}

wb.html =
/**
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body style="background:#f7f7f7">
请拖动文件到这里
</body>
</html>
**/


winform.show()
win.loopMessage();


回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 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, 2018-10-21 23:19 , Processed in 0.062500 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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