web 前端经常使用组件【06】Upload 控件

阅读目录

• 1. Input type="file" 也能够性感
• 2. Uploadify 双版本上传组件
• 3. Web Uploader 百度技术团队开源力做

    由于有万恶的IE存在，因此当Web项目初始化并进入开发阶段时。

    若是是项目经理，须要知道客户将会用什么浏览器来访问系统。

    明确知道限定浏览器的状况下，你才能从容的让手下的封装必要的前端组件。

    本篇文章试图从常见的上传方式和组件进行分析，仅局限与前端，至于后端需依据业务复杂度，自行拿捏实现方式，若文中有纰漏，欢迎拍砖！

回到顶部

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>

    多个文件一块儿提交，添加里面的 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">  的标签能出现的项目，定位在小型简单、客户好说话的web应用中。

回到顶部

2. Uploadify 双版本上传组件

    这个组件想必是用的比较普遍，提供 Flash 和 HTML5 两个不一样的版本，能让你避免不少浏览器兼容性的问题。

    支持显示文件上传实时进度条，拖拽文件上传、多样化的参数配置、高度可定制化....能知足绝大部分项目的上传需求。

    官网地址：http://www.uploadify.com/

    其中 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 的高，兼容性和稳定性必须舍弃一部分，让二者都有相对最优解。

回到顶部

3. Web Uploader 百度技术团队开源力做

   Webuploader 是由百度 Fex-team 团队开发，官网地址：http://fex.baidu.com/webuploader/

   除了 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>

     初始化组件方法(具体的参数设置和回调函数的入参请查阅官方文档):

  View Code

    Uploadify 和 Uploader 均可以动态的添加表单参数。

    我的偏向于喜欢百度的这款 Uploader，但仁者见仁智者见智，多几种选择何尝不是好事情。

    还须要注意的是，在实现获取上传文件的过程当中，我发现只有表单提交上去的多文件是在一次请求当中。

    而 Uploadify 和 Uploader 都是点击所有上传后，屡次请求后端的 Action,每次只携带一个文件。

    请求次数等于你的文件上传次数，我在实现过程当中是经过添加时间戳的方式解决的该问题。

    也有多是我使用的有问题，文件上传后确定须要和具体的业务挂钩，业务问题这里就不赘述了。