有关HTML5图片上传

  本来不想写关于这个东西的,但是昨天晚上,今天晚上,时间全耗在这个上面了,必须得写写。
  最简单的一点,IE9已下不支持这个东西,复杂点,这个东西相比其他Flash的上传组件好用那么一点。说说昨天晚上的东西,我特意把那个PHP文件管理器给更新了一下,如果发现问题了又不更新貌似不科学啊,所以HTML5的上传组件就得慢慢折腾了。
PHP文件管理器上传组件
  刚在火狐上测试了一下,没什么问题,虽然界面丑点,也没什么关系。但是,测试另一个东西却发现出不来了,先是安全性问题,还必须得把那个文件上传按钮放出来,还有不知道是chrome的排版格外好还是其他浏览器太烂,各种错位,唉,折腾不起啊。
图片上传测试错位
  慢慢解决吧,先说说HTML5上传的问题,首先检查HTML5上传支持.

//FileReader对象是关键
if (typeof(window.FileReader) == 'undefined') {
    alert('当前浏览器不支持HTML5上传,所以请你更换浏览器。');
}

  接下来上传的问题,这里使用的是新的XMLHttpRequest对象,上传的关键代码很简单,不同的就是支持的方便些。

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", this.progress, false);//这个是进度条的事件
xhr.addEventListener("load", this.complete, false);//是否上传完成的事件
xhr.addEventListener("error", this.failed, false);//上传错误的事件
xhr.addEventListener("abort", this.canceled, false);//上传终止的事件
xhr.open("POST", URL + "Api/upload_file", true);//设置上传地址
var fd = new FormData();//创建一个新的表单
fd.append("Filedata", LyUpload.files.list[LyUpload.index]);//这个是上传文件,对应好就行,会自动解析
fd.append("path", NOW_PATH);//添加其他参数
xhr.send(fd);

  需要注意的就是,如果你要一次上传多个就应该考虑一个一个的来,如果对这个东西for循环一次,感觉是件很不靠谱的事情,而且错误不好处理,最好就是在load事件发生之后开始上传下一个文件,这样精度条相对也比较容易控制。
  多个文件上传,如果涉及到多次添加,文件重复怎么办,简单的办法是建一个hash表,将文件信息存储一下,比如:

function get_file_uid(file) {
    //这里的md5是自定义函数,下面的几个参数是唯一能找到的,想办法试试吧。
    return md5(file.lastModifiedDate + file.size + file.name + file.type);
}

  文件多次添加,队列如何处理呢,唯一的办法是新建一个File的数组来存储,并且设置相关的描述值,比如我的方式。

var files_info = {files: {},//文件存储信息,是对象,非数组
    uid: {},//文件唯一ID
    count: 0, //当前队列计数
    index_list: [],//当前文件对象,对应的对象键值
    index_key: '0', //在循环时可以用到的键名
    upload_lock: false, //文件上传锁,防止多文件同时上传出异常
    all_upload: false,//全部上传标记
    index: 0//当前全部上传计数,可以用来对应index_list数组的值
};

  这样几次处理,上传就没什么问题了,可以对上传列表进行添加删除也不是问题,当然,前提是你需要这样的操作,比如在文件管理器中,我可能对是否唯一性并不在意,还有图片上传可能允许单独上传,但文件管理器中,单独上传有必要么?
  总之,挺简单的东西,用着用着就没那么轻松了。正如想法多了,所看到的世界也就复杂了。

9条评论在“有关HTML5图片上传”

写下你最简单的想法