关于文件上传的几种方式

上传之前 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包括：

1. FileList序列：代表本地系统中选中的文件组成的数组，通过<input type='file'>调用
2. Blob接口，原始二进制数据，通过Blob对戏那个你可以访问里面的字节数据。
3. File接口，里面存有文件中的只读属性，文件名，类型，访问地址。
4. FileReader接口，提供读取文件方法
5. 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只能为绝对路径，不然就会报错。在这里困了好久。