HTML5完整版本上传示例

最新推荐文章于 2024-06-29 16:04:34 发布

xq_software

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量1.7k

点赞数

分类专栏： web开发组件封装上传插件文章标签： html5 文件上传 upload 插件多文件上传

本文链接：https://blog.csdn.net/xq_software/article/details/52776179

版权

这个博客介绍了如何实现一个基于HTML5的批量文件上传组件，适用于支持HTML5的浏览器和触摸设备。它支持多文件选择、自定义提交参数、文件大小数量限制、MD5校验、服务器反馈信息展示以及上传顺序控制。博主分享了组件的核心组件来源、调用方法、配置参数文件的示例代码，并提供了解决上传过程中遇到问题的总结，特别提到了在Java Struts2环境下上传文件的实践经验和反馈信息处理方式。

摘要由CSDN通过智能技术生成

HTML5完整版本上传示例

本身用flash插件一直上传，但是有很多场景不兼容，有些核心配置改不了，终于整理好了一个HTML5的版本，下面有传送门：
解决了几个客户需要的几个主要问题：

可多文件选择，有特效不死板
自定义提交参数
文件大小数量限制
*MD5校验
服务器反馈信息展示
可控制上传顺序
多视图切换

这里还是申明一下插件核心组件出处CFUpdate (0.8.2 Base)

HTML5 批量上传组件
HTML5版本，只要支持HTML5的浏览器都可以正常使用，并对触摸屏（手机，平板）进行了优化
IE9+ Firefox Chrome Opera Safari IPhone4 iPad2 Android 2.1

CFUpdate HTML5版本，只要支持HTML5的浏览器都可以正常使用，并对触摸屏（手机，平板）进行了优化
IE9+ Firefox Chrome Opera Safari IPhone4 iPad2 Android 2.1 —— [ CFUpdate ]

代码块

调用方法 HTML代码：

<script type="text/javascript" src="CFUpdate.min.js" charset="utf-8"></script>

<div id="cfupdate" ></div>

主要配置参数的文件（Config.js）代码

function challs_flash_update(){ //初始化函数
    var a={};
    //定义变量为Object 类型

    a.title = "上传文件"; //设置组件头部名称

    a.FormName = "Filedata";
    //设置Form表单的文本域的Name属性

    a.url = "update.php"; 
    //设置服务器接收代码文件

    a.parameter = ""; 
    //设置提交参数，以GET形式提交,例："key=value&key=value&..."

    a.typefile = "*.gif;*.png;*.jpg;*.jpeg;*.avi;";
    //设置可以上传文件 数组类型
    //"*.gif;*.png;*.jpg"为文件扩展名列表，其中列出用户选择要上载的文件时可以看到的 Windows 文件格式，以分号相隔

    a.UpSize = 0;
    //可限制传输文件总容量，0或负数为不限制，单位MB

    a.fileNum = 0;
    //可限制待传文件的数量，0或负数为不限制

    a.size = 2048;
    //上传单个文件限制大小，单位MB，可以填写小数类型

    a.FormID = ['select','select2'];
    //设置每次上传时将注册了ID的表单数据以POST形式发送到服务器
    //需要设置的FORM表单中checkbox,text,textarea,radio,select项目的ID值,radio组只需要一个设置ID即可
    //参数为数组类型，注意使用此参数必须有 challs_flash_FormData() 函数支持

    a.autoClose = 1;
    //上传完成条目，将自动删除已完成的条目，值为延迟时间，以秒为单位，当值为 -1 时不会自动关闭，注意：当参数CompleteClose为false时无效

    a.CompleteClose = true;
    //设置为true时，上传完成的条目，将也可以取消删除条目，这样参数 UpSize 将失效, 默认为false

    a.repeatFile = true;
    //设置为true时，可以过滤用户已经选择的重复文件，否则可以让用户多次选择上传同一个文件，默认为false


    a.MD5File = 1;
    //设置MD5文件签名模式，参数如下 ,注意：对大文件计算时会很慢,在无特殊需要时，请设置为0
    //0为关闭MD5计算签名
    //1为直接计算MD5签名后上传
    //2为计算签名，将签名提交服务器验证，在根据服务器反馈来执行上传或不上传
    //3为先提交文件基本信息，根据服务器反馈，执行MD5签名计算或直接上传&#