有关HTML5图片上传

9 条评论 学习笔记

　　本来不想写关于这个东西的，但是昨天晚上，今天晚上，时间全耗在这个上面了，必须得写写。
　　最简单的一点，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图片上传”

写下你最简单的想法