【翻译】多文件上传

多文件上传
以往我打算是实现同时上传多个文件,会使用多个"file"表单元素,这是令人讨厌的,效率低下(译者注:用户需要一个文件一个文件地选择),但我无法想象我如果不使用它的话,我的用户会怎么样。很幸运,Safari, Chrome和firefox 现在已经实现了使用一个file表单元素就能完成完成多文件上传的方法。
查看DEMO
HTML
<form method="post" action="upload-page.php" enctype="multipart/form-data"> <!-- 译者注:注意這個multiple属性和name属性 --> <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> </form> <br/>
简单的给file 表单元素添加一个muliple属性就允许多文件上传了。(译者注:multiple的值的作用不清楚,原文的意思大概是可以添加验证功能)
Listing Multiple Files with JavaScript
//get the input and UL list var input = document.getElementById('filesToUpload'); var list = document.getElementById('fileList'); //清空列表 while (list.hasChildNodes()) { list.removeChild(ul.firstChild); } //遍历每一个选择上传的文件 for (var x = 0; x < input.files.length; x++) { //add to list var li = document.createElement('li'); li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; list.append(li); }
file表单元素的files属性是一个数组,所以可以通过length属性可以知道用户选择的文件。可以遍历得到每一个文件的路径(path)和名称(name)。
Receiving and Handling Files with PHP
使用PHP接收并处理文件
if(count($_FILES['uploads']['filesToUpload'])) { foreach ($_FILES['uploads']['filesToUpload'] as $file) { // 你可以在处理图片 echo $file; } }
PHP根据表单的那么属性创建了一个文件数组。
当然,你也可以在IE和opera中通过flash实现多文件上传,可是想这样要另外的组件支持始终不是什么好主意。希望这些浏览器快点支持多文件上传吧!
by 译者
评论中以外发现一个flash上传的jquery插件http://www.uploadify.com/,这段时间在弄大文件上传的处理方式,是使用swfupload这个组件实现的。
记录一下这个uploadify, 以后也许用得着:)
cakephp中定义flash的样式
公司要用cakephp开发项目,由于之前没有使用过cake,开发起来比较吃力。因为项目过紧,也就没有时间去慢慢系统的学习cake,只有一边学一边做。
今天就遇到了一个自定义flash信息的问题。一般我们在controller中使用setFlash()来设置信息内容:
$this->setFlash('要现实的信息');
然后在view层使用flash()来显示。默认是生成一下的html
<div class="message" id="flashMessage">要现实的信息</div>
可是今天wendy发来的模板上面包裹着显示信息的div有个class(不是默认的"message"),如何设置信息中的样式难住了我,google搜索相关资料都找不到解决方法。
最后只好硬着头皮看源码了,看了源码后才茅塞顿开,原来setFlash()就可以设置包裹信息的html元素!而这些api上应该是有说明的。
自定义flash样式代码如下:
$this->setFlash('可以设置样式咯','default',array('class'=>'你自己的class'));
setFlash中的第二个参数是设置包裹信息的html元素,源码中默认是'defualt'(相当于div),如果要用其他元素,需要另外定义element模板。
PS:到新公司上班第三天了,感觉很好,公司的气氛很活跃。