上传之前 JavaScript 检测
1:javascript判断上传文件的大小:
在FireFox、Chrome浏览器中可以根据document.getElementById(“idoffile”).size 获取上传文件的大小(字节数),而IE浏览器中不支持该属性,只能借助标签的dynsrc属性,来间接实现获取文件的大小(但需要同意ActiveX控件的运行)。
var ua = window.navigator.userAgent; if (ua.indexOf("MSIE")>=1){ browserCfg.ie = true; }else if(ua.indexOf("Firefox")>=1){ browserCfg.firefox = true; }else if(ua.indexOf("Chrome")>=1){ browserCfg.chrome = true; }
if(browserCfg.firefox || browserCfg.chrome ){ filesize = objfile.files[0].size; }else if(browserCfg.ie){ var objimg = document.getElementById(‘tempimg‘); objimg.dynsrc=objfile.value; filesize = obj_img.fileSize; }
2:在 HTML 文档中<input type="file">
标签每出现一次,一个FileUpload
对象就会被创建。
该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见,file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略,并且对于此类元素来说,value 属性是只读的,这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。
直接读value属性:
3:<input type=‘file‘>
的files属性,是一个FileList对象(类数组对象),包含了名字和大小 等。如下:
HTML5 File API实现上传文件
访问本地文件的一个简单的方法是通过<input type="file"/>
HTML表单元素。这会给你访问为只读信息提供一个单独的文件如它的名称,大小,MIME类型,文件句柄的引用。
HTML5的File API包括:
- FileList序列:代表本地系统中选中的文件组成的数组,通过
<input type=‘file‘>
调用 - Blob接口,原始二进制数据,通过Blob对戏那个你可以访问里面的字节数据。
- File接口,里面存有文件中的只读属性,文件名,类型,访问地址。
- FileReader接口,提供读取文件方法
- FileError接口和FileException对象,定义错误产生条件。
下面实现单文件访问:核心代码就两行,也就是上面提到的FileList和FileReader。
结果:
实现多文件访问:
结果:
ps:另外一个种方式File API,它 是 Mozilla 向 W3C 提交的一个草案,可以监听onload,onprogress,onloadstart等事件。详见这里。
使用PHP实现文件上传
HTML:注意设置MIME编码为multipart/form-data.
enctype=”multipart/form-data”是上传二进制数据; form里面的input的值以2进制的方式传过去。
<form enctype="multipart/form-data" method="post" action=".."> <input type="file" id="screenshot" name="screenshot" /> <hr /> <input type="submit" value="Add" name="submit" /> </form>
php:
$screenshot = $FILES[‘screenshot‘][‘name‘]; $screenshottype = $FILES[‘screenshot‘][‘type‘]; $screenshotsize = $_FILES[‘screenshot‘][‘size‘]; $target = $SERVER[‘DOCUMENTROOT‘].GWUPLOADPATH . $screenshot; moveuploadedfile($FILES[‘screenshot‘][‘tmp_name‘], $target)//这里把我们上传的文件放到$target。
需要注意的是,moveuploadedfile函数里面的$target只能为绝对路径,不然就会报错。在这里困了好久。