威尼斯人平台 1

   
因为有万恶的IE存在,所以当Web项目初阶化并步入开荒阶段时。

Dojo作为最显赫的JavaScript库之生机勃勃,最近也从来未曾甘休过对各个新技能的利用,对新职业的齐心协力。只怕你早已运用dojo非常久,但可曾注意过dojo中对HTML5的使用呢?

在Dojo1.2军长加码二个多文件上传组件,那一个组件通过在页面上扩展四个隐身的Flash文件来扩展部分原先HTML的uploadfile组件说并未有的功力。他不止使得应用ajax格局上传七个文件变得特别便于,而且带来了大多的好处:

   
固然是项目首席营业官,须求领会客商将会用什么浏览器来拜望系统。

Dojo中已经选择的HTML5风味:

能够在客商端就过滤文件的门类和尺寸了足以轻巧设计上传的分界面了——早前平常的HTML的uploadfile中想更换按键的体裁都比较不方便越来越多的恢弘调整,提供了onChange、onProgress、onComplete、onError
等事件,能够经过充足自个儿的监听方法开展更加多的主宰更加多的音信请见Ajaxian的简报Dojo
Multifile Uploader with
Flash,详细的用法请见Dojo背后支撑公司SitePen的博客小说The Dojo Toolkit
Multi-file Uploader,他们还提供了二个示范。上面是少年老成段样例代码:

   
分明知晓约束浏览器的情事下,你本事从容的让手下的卷入要求的前端组件。

1)扶持HTML5 自定义属性的dojo.parser

var uploader = new dojox.form.FileInputFlash({uploadUrl:"",button:myButton,uploadOnChange: false,selectMultipleFiles: true,fileMask: ["All Images", "*.jpg;*.jpeg;*.gif;*.png"],degradable: true}); 

    本篇小说试图从广大的上传方式和组件实行深入分析,仅局限与前面一个,至于后端需依附职业复杂度,自行拿捏达成方式,若文中有尾巴,接待拍砖!

2)支持HTML Canvas的dojox.gfx和dojox.charting

本条组件将饱含在Dojo1.第22中学,按陈设Dojo1.2将会在前段时间宣告。你能够个下载nightly
builds提前体会一下。

1. Input type=”file” 也得以风流

   
当然你也得以不用任何成熟的上传组件,表单提交文件,像那样:

<form action="<%=request.getContextPath()%>/uploadfile" method="POST" enctype="multipart/form-data">  
    yourfile: <input type="file" name="myfiles"/><br/>  
    <input type="submit"/>  
</form>

    多个文件一同提交,添Gary面包车型地铁 input
选项就能够,但 name 名称需求平等。

   
当然你也足以在交付文件的时候,提交一些此外的参数数据上去,像下边那样:

<form action="<%=request.getContextPath()%>/uploadfile" method="POST" enctype="multipart/form-data">  
    username: <input type="text" name="username"/><br/>  
    password: <input type="password" name="password"/><br/>  
    yourfile: <input type="file" name="myfiles"/><br/>  
    yourfile: <input type="file" name="myfiles"/><br/>  
    yourfile: <input type="file" name="myfiles"/><br/>  
    <input type="submit"/>  
</form>

    注意当中的 enctype
设置为multipart/form-data。

   
这种上传文件的章程,优短处简单来讲,不必要选择别的第三方 js,纯自然 html
标签、走到哪用到哪、没有浏览器障碍…..

   
对于产生的门类需要,例如这么些特色:实时上传的进程条、能拖拽文件上传、上传前压缩、MD5加密验证等…..

   
你必要耐着本性本身完成,有造好的轮子,你干什么不用吧?

    所以说这种世风日下撩人的 <input
type=”file”>
 的价签能冒出的花色,定位在Mini轻巧、顾客好说话的web应用中。

3)支持HTML5 indexed Database Object Store API 的 dojo.store API

2. Uploadify 双本子上传组件

    这一个组件想必是用的相比较分布,提供
Flash 和 HTML5 五个差异的本子,能让你防止过多浏览器宽容性的标题。

   
援助展现文件上传实时进程条,拖拽文件上传、二种化的参数配置、中度可定制化….能满意绝大部分品类的上传需要。

   
官方网址地址:

    此中 Flash 版是免费下载的,但 HTML5
版本必要掏钱,倘若您须要H5  Version,请在切磋区留邮箱。

    使用这一个组件的前提,要求先引入Jquery:

<script type="text/javascript" src="/style/js/jquery.js"></script>
<script type="text/javascript" src="/style/js/jquery.uploadify.min.js"></script>
<style type="text/css" src="/style/js/uploadify.css"></style>

<div class="updiv">
    <div class="upfileAfter">
        <a href="javascript:$('#upfileBtn').uploadify('upload','*')">开始上传</a>
    </div>
    <a href="#" id="upfileBtn">选择文件</a>
</div>

    
初阶化组件方法(具体的参数设置和回调函数的入参请查阅官方文书档案卡塔尔:

$("#upfileBtn").uploadify({
    'debug': false,// 开启调试
    'auto': false,// 是否自动上传
    //'simUploadLimit' : 3,  //并发上传数量[falsh版不生效]
    //'successTimeout': 30,// 默认值30秒,文件上传完成时等待服务器响应的时间,之后显示成功信息。
    'fileObjName' : 'file',
    'swf': XX+ "/style/js/uploadifynochange/uploadify.swf",
    'uploader': XX + '/service/uploadFile',// 上传处理程序
    'formData': {'fjzlDm': '', timeStamp: ''},
    'multi': true,// 是否支持多文件上传
    'width': '95px',// 浏览按钮的宽度
    'height': '30px',// 浏览按钮的高度
    'progressData' : 'speed', //文件进度条的样式
    'buttonText': '<i class="icon icon-file icon-white"></i> 选择文件', //按钮文字
    'fileSizeLimit': '10240',//上传文件大小限制
    'fileTypeExts': '*.bmp;*.png;*.jpeg;*.jpg;*.gif',//可上传的文件类型
    'overrideEvents': ['onDialogClose','onUploadSuccess','onUploadError'],
    'onFallback': function () {
        alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");// 检测FLASH失败调用
    },
    'onDialogClose': function () {
        alert("Dialog  Close......");
    },
    'onUploadSuccess': function (file, data, response) {
        alert("UploadSuccess......");
    },
    'onUploadError' : function () {
        alert("Upload   Error......");
    }
});

   网络有相当多上传组件都以改良 Uploadify
的源码的某意气风发有个别,然后重新命名的。

   那几个组件在品种中表现实在准确,使用
Flash version 浏览器中只须求设置 Flash Player 就能够。

   当下浏览器中不安装 Flash Player
的确找不出多少个。

   但不置可以还是不可以的是 Flash 功用 没有 H5
的高,宽容性和安居必需屏弃风华正茂部分,让两个都有相对最优解。

4)基于HTML5 localstorage的dojox.storage.LocalStorageProvider

3. Web Uploader 百度技巧公司开源力作

   Webuploader 是由百度 Fex-team
团队开荒,官方网址地址:

   除了 Uploadify
的富有性格,最吸引人的特色是文件能够分片并发上传、同大器晚成组件内部调控利用
Flash 照旧 H5 上传….

 
 最后上台的日常都是压轴人物,不否认的是当今大家中项目中央银行使的正是 Web
Uploader 组件。

 
 不在为浏览器的宽容性而往往更动零器件调解代码,Uploader
会依照运维条件切换上传的艺术,让您更省心。

<script type="text/javascript" src="/style/js/jquery.js"></script>
<script type="text/javascript" src="/style/js/webuploader.min.js"></script>
<style type="text/css" src="/style/js/webuploader.css"></style>

<div id="uploader" class="wu-example">
    <div id="thelist" class="uploader-list"></div>
    <div class="btns" style="position: relative;display: inline-block">
        <div id="picker"><i class="glyphicon glyphicon-plus"></i>点击添加文件</div>
        <a href="#" id="up-all">开始上传</a>
    </div>
</div>

     开端化组件方法(具体的参数设置和回调函数的入参请查阅官方文书档案卡塔尔(قطر‎:

威尼斯人平台 2威尼斯人平台 3

var uploader = WebUploader.create({
            // swf文件路径
            swf:  '/style/js/webuploade/Uploader.swf',
            // 文件接收服务端。
            server: '/service/uploadFile',
            auto: false,
            formData: {
                paramA: 'paramA'
            },
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: '#picker'
        });

        $("#up-all").on("click",function(){
            uploader.upload();
        });
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $("#thelist").append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>');
        });

        // 文件上传过程中创建进度条实时显示
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');
            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('startUpload', function () {
            uploader.option('formData', {'paramA': ''});
        });

View Code

    Uploadify 和 Uploader
都能够动态的充足表单参数。

    个人偏侧于爱好百度的这款
Uploader,但各持己见独持争议,多两种选用未尝不是好工作。

   
还亟需注意的是,在完结获取上传文件的进度中,作者开采唯有表单提交上去的多文件是在一回倡议此中。

    而 Uploadify 和 Uploader
都是点击任何上传后,多次呼吁后端的 Action,每一回只指导二个文本。

   
须求次数等于你的文件上传次数,作者在实现过程中是经过抬高时间戳的诀要解决的该难点。

   
也可以有十分的大希望是自己使用的有标题,文件上传后断定必要和现实的事务联络,业务问题这里就不赘述了。

 

5)支持HTML5 multiple file input 的 dojox.form.Uploader

扶助HTML5 自定义属性的dojo.parser

怎么着为页面中的二个节点设置叁个自定义属性来推断该节点是不是足以被拖拽?面前遭遇那几个难点,大家可能会不假考虑地为节点附上二个“draggable”属性。但我们再三忽略了有些——这一个“draggable”属性是不是会与别的属性产生冲突?大家的资历告诉大家不会。的确,在HTML5以前,大家反复会经过这种措施来得以达成拖拽成效。但不幸的是,在HTML5中,“draggbale”已然是正规属性之生龙活虎,这也就表示改过“draggable”属性会修正节点对应的浏览器行为,而那并不一定是您想要的。

实际在dojo1.5在此之前的版本中,我们就直接在行使这种恐怕存在高危机的自定义属性。回顾一下大家是怎么着用竹签声美赞臣(Meadjohnson卡塔尔国个常用的dojo按键控件dijit.form.Button的:

<button id="button1" dojoType="dijit.form.Button">Button1</button> 

就算dojoType并不太恐怕成为HTML标准属性之生机勃勃,但不可不可以认那不是风流罗曼蒂克种名贵的完结方式。

而HTML5中曾经有了针对性自定义属性的行业内部。全体自定义属性都一定要以data-作为前缀。这样就足以很平价的将HTML规范属性与自定义属性区分开来,不仅仅提供了代码的可读性也防止了与正式属性冲突的危机。

在dojo1.6中,也本着HTML5的那豆蔻年华行业内部做出了相应的校勘。你能够在dojo1.6中开采黄金时代类别契合标准的自定义属性,那一个属性已经足以被dojo.parser正确地辨识出来:

1)data-dojo-config:替代了原来的dojoConfig,用以配置dojo库的各样参数

2)ata-dojo-type:代替了原来的dojoType属性,用以内定所用的dojo对象类型

3)ata-dojo-props:取代了原来持有发轫化dojo控件的自定义属性。

里面data-dojo-config与data-dojo-type的行使方法与原本的dojoConfig以致dojoType未有差距。而data-dojo-props则大大美化了伊始化控件时的性格配置代码。

运用非HTML5标准属性时,声爱他美个大约的CheckBox大家可能供给为节点单独设置5个属性值:

<input name="cb1" id="cb1" value="foo"   dojoType="dijit.form.CheckBox"   onClick="console.log('clicked cb1')">  

而行业内部属性data-dojo-props之后,大家则只供给安装六本性子:

<input id="cb1" data-dojo-id="cb1" data-dojotype="dijit.form.CheckBox" data-dojo-props='name:"cb1", value:"foo", onClick:function(){ console.log("clicked cb1") }'/> 

更值得注意是,那样的扬言方法和动用JavaScript动态创建三个Check博克斯非常相似:

new dijit.form.CheckBox({  id: "cb1",  name: "cb1",  value: "foo",  onclick: function(){console.log("clicked cb1")},  }, "cb1"); 

那是因为dojo.parser会将data-dojo-props中的内容作为二个散列参数表来开端化控件。那使得标签和代码二种样式的起始化代码能够最大程度上的保持生机勃勃致。

可以预知,HTML5的自定义属性在dojo中收获了充裕的接纳,带给了很好的职能。可是在dojo1.6中,那样的自定义属性还不能够使用在dojox.mobile包中的控件上。可是能够预感,在今后的版本中,dojox.mobile包中的控件也将支撑那黄金年代实用的特色。

支持HTML Canvas的dojox.gfx和dojox.charting

在HTML5过多特色之中,Canvas可能是带给大家心得最深的一个了。众多依据Canvas的行使丰裕展示了它强盛的绘图功效。其主干绘图流程如下:

// 获取canvas元素  var canvasElement= document.getElementById("canvas");  // 默认浏览器支持Canvas,获取canvas元素对应的2D上下文环境  var canvasContext = canvasElement.getContext("2d");  If(canvasContext){  canvasContext.fillStyle = "#1433FF"; //设置绘图的填充色  canvasContext.strokeStyle = "#FF1500"; //设置绘图的线条显色  canvasContext.lineWidth = 1; //设置绘图的线条宽度  canvasContext.fillRect (10, 10, 110, 110); //绘制实心矩形  canvasContext.strokeRect(10, 230, 110, 110); //绘制空心矩形  } 

其它canvasContext还提供了功能齐全的绘图折线、文字、阴影、图片等API。那一个内容已远远超越本文所涉嫌的界定,因而不再生机繁荣富强勃勃赘述。

对此这么强硬的Canvas,dojo其实也早就经将其构成到了自身的图片模块中。由于dojox.gfx包下的dojox.gfx.canvas模块对
HTML5 Canvas
API的绘图接口进行了包装,使得dojox.gfx的canvas绘图接口VML、SilverLight绘图没有任何分歧。你无需其余的
Canvas
API使用经验,只需在dojo的安插选项中将图形渲染情势设置为canvas就能够:

<script type="text/javascript" data-dojo-config="gfxRenderer:'canvas'" src="dojo.js"></script> 

依据dojox.gfx对于各个绘图格局一贯的接口,dojox.charting下的保有图表也都匡助canvas形式。只需将渲染方式设置为canvas,你便赢得了大器晚成套完全依赖HTML5
Canvas API的图表库。

其余,你还足以经过为gfxRenderer配置候补选项来使dojox.gfx在不扶持HTML5的情况下活动使用任何渲染器。如下列代码就钦点优用HTML5
Canvas举行图片渲染,倘使浏览器不扶助canvas的话会挨个尝试svg和vml进行渲染。

<script type="text/javascript" data-dojo-config="gfxRenderer:'canvas,svg,vml'"   src="dojo.js"></script> 

支持HTML5 indexed Database Object Store API 的 dojo.store API
在HTML5中建议了朝气蓬勃套基于键值没有错多寡存款和储蓄API。使用者能够省略透明地因而运用以下方法来对存款和储蓄的数量开展询问、更新、增添、删除:

1)get(index卡塔尔(قطر‎: 依据索引值获取数据。

2)put(value, /*可选*/ index卡塔尔(英语:State of Qatar): 更新数据记录。

3)add(value,/*可选*/ index卡塔尔(قطر‎:
添增加少记录。若索引指向地方已存在记录,则增进失利。

4)remove(index卡塔尔国: 依据索引值移除数据记录。

dojo
1.6中的dojo.store很好的贯彻了那朝气蓬勃套接口,尤其简化了原始的dojo.data包所提供的多寡存款和储蓄API。dojo.store包下有两种已贯彻的store:

1)Memory:轻便、轻量级的store,切合管理小数码集。

2)JsonRest:特地为REST API服务的store,符合管理大数目集。

3)DataStore:用于为原来dojo.data包下的store提供object store api的store

这两种store即便起始化方法和应用情况各有分化,但都提供了相符HTML5正经的get,put,remove方法除了DataStore之外,也都提供了add方法)。客户能够通过如下的流水生产线对这几个store进行很有益的操作:

//获取索引为some-id的记录  var record = store.get("some-id");  //修改获取的记录的bar字段  record.bar = newValue;  //更新该记录  store.put(record);  //创建一条新记录  var newRecord = {id: "some-new-id",   bar: "bar",  foo: "foo" };  Store.add(newRecord ); 

大家得以看见使用dojo.store包完毕的object store
API实行数量管理就不啻处理平时JavaScript
Object同样方便。之后大家还将看到那套API还周密的运用到了dojo对于HTML5
localstorage的兑现——dojox.storage.LocalStoragePovider上。

基于HTML5 localstorage的dojox.storage.LocalStorageProvider

HTML5 在多少存款和储蓄方面不止提供了便利的indexed Database Object Store
API,还提供了要命行之有效的Local Storage。 Local Storage也被称作Web
Storage、Dom
Storage。简单地说其本质就是以键值对封存的Web页面音讯。和原先小编们常用的cookies肖似,能够保存页面相关音讯,哪怕顾客间隔当前页面以致平昔关门了浏览器。相较于cookies,Local
Storage最大的特征就是可以积累更加多的消息——cookies最大不能不保留4KB数据。同期Local
Storage中的数据并不会被传送到服务器端cookies则会趁机http央浼被发送)。

LocalStorage的运用方法也要命轻易,从LocalStorage获取一个值能够因而

var value = localstorage.getItem("bar"); 

或更为便民的

localstorage["bar"]; 

措施得到。而向localstorage写一个值可以通过

localstorage.setItem("bar", "newValue"); 

或更为方便人民群众的

localstorage["bar"] = "newValue"; 

来实现。

dojo 的dojox.storage
包提供了每一样常用的数目存款和储蓄工具:适用于cookies的CookieStorageProvider,适用于Googlegears的GearsStorageProvider,适用于Adobe
Air的AirDBStorageProvider、AireFileStorageProvider、
AireEncryptedLocalStorageProvider等。

在这之中dojo也非常针对HTML5 local
storage特性提供了LocalStorageProvider。LocalStorageProvider完全协作简便的Object
Store API,其接口及其关键功效如下:

威尼斯人平台,put: function( /*string*/ key, /*object*/ value, /*function*/
resultsHandler,/*string?*/ namespace)

用以保存后生可畏对键值。第二个参数为所要保存的数指标目录。首个参数是所要保存的数码。第八个参数用以管理数据保存结果的回调函数数据保存或许停业)。最终二个参数为可选的命名空间名。dojo为了越来越好的治本存储内容,提供了命名空间那大器晚成参数,其本质是将命名空间和目录组成一个形为
“__namespace_key”的新索引值,而命名空间的默许值为“default”。

get: function(/*string*/ key, /*string?*/ namespace)

用来获取钦赐命名空间下的所给索引指向的数码。

率先个参数为所要获取的多寡的目录。第叁个参数为可选的命名空间名,暗中认可值为“default”。

remove: function(/*string*/ key, /*string?*/ namespace)

用来删除钦赐命名空间下的所给索引指向的数额

率先个参数为所要获取的数据的目录。第四个参数为可选的命名空间名,默许值为“default”。

clear: function(/*string?*/ namespace)

用于清空内定命名空间下的持有数据。参数为可选的命名空间名,暗中认可值为“default”。

这几个API不止与dojox.storage包下的其余provider保持黄金时代致,还与dojo.store包中提供的store对象的接口宽容。由此dojox.storage.LocalStorageProvider和dojo.store包为HTML5的存储连串提供了全部的支持。

支持HTML5 multiple file input 的 dojox.form.Uploader

HTML5中对种种标签都开展了加强,此中也不乏对于各种HTML控件的改过。当中input标签就收获了名叫multiple的新属性。在此之前HTML中的
input标签只好接收单个文件,而有了multiple属性之后,你能够使用input标签二次性采纳七个文本。如有二个input控件:

<input multiple="multiple" id="uploadfile" type="file" name="uploaddfile"></div> 

你可以点击浏览按键之后在文书选用窗口中一回性选拔八个须要的文件。而且能够通过如下代码获取接受的文书新闻:

var files = document.getElementById("uploadfile").files; 

input标签的文书采用功能往往被利用于文件的上传中。而dojo
1.6中的dojox.form.uploader则很好的接纳了HTML5那生龙活虎新天性完毕了借助HTML5的多文本上传。

率先dojox.form.Uploader会判断当前的浏览器是不是帮衬HTML5的加强版input标签,如若帮助,那么dojox.form.Uploader将会采纳含有multiple属性的input标签。

dojx.form.Uploader提供了以下API对HTML5的多文本上传进行帮忙:

getFileList: function()

用来获取当前筛选的文件新闻。本质是得到相应的input标签下的files数据开展整合治理,并为每种文件加多索引。

upload: function(/*Object ? */formData)

用以上传钦赐数据文件),dojox.form.uploader.plugins.HTML5具体达成了该方式的HTML5版本还应该有Flash和
Iframe二种版本可选,分别由别的三个插件达成)。该方法会决断当前的浏览器是还是不是辅助FormDataFirefox
4之上和Webkit内核的浏览器基本都补助),若帮助则利用该方法上传,不然使用binary格式上传。

submit: function(/* form Node ? */form)

用于当dojox.form.Uploader处于叁个form表单之中时,同期上传文件及表单内别的音讯。

reset: function()

用来驱除当前选取的富有文件,还不帮衬免去单个钦赐的文本。

有了dojox.form.Uploader,你能够很有益的创办一个基于HTML5的多文件上传控件,并动用其API对其展开调节。当然,dojo也为不帮助HTML5那意气风发新特性的浏览器提供了别的解决方案。你可以窥见在dojox.form.uploader.plugins包下除了HTML5之外还有IFrame和Flash三种插件。假如浏览器不扶持HTML5的多文本选取功用,那么dojox.form.Uploader会自动尝试采取那五个插件来落实多文本上传。你无需为了让代码能够跨平台而花销任何精力。

总结

当今我们得以窥见,在Dojo中,HTML5实际已经应用在各样方面,从数额存款和储蓄到图片绘制,从代码风格到具体控件。相信在前天的版本中,Dojo组织首领久以来的融合种种新本事、包容各类新标准,提供更加好的客户体验!

作为最盛名的JavaScript库之后生可畏,方今也直接未有止住过对种种新手艺的应用,对新专门的学业的血肉相连。可能你早就采纳dojo相当久,但可曾注意过…

相关文章