Code our life 日日行,不怕千万里;时时学,不怕千万卷

20七/100

【翻译】多文件上传

多文件上传

多文件上传

以往我打算是实现同时上传多个文件,会使用多个"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, 以后也许用得着:)

24三/100

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:到新公司上班第三天了,感觉很好,公司的气氛很活跃。