图片上传

1. 传统的form表单上传

<form action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="img">
</form>

1. 必须使用post方法
2. enctype的值必须为multipart/form-data

2. 隐藏iframe模拟Ajax上传

<iframe  name="ajaxUpload" style="display:none"></iframe>
<form action="url" method="post" enctype="multipart/form-data" target="ajaxUpload">
    <input type="file" name="img">
</form>

1. 隐藏iframe
2. form表单的target为隐藏的iframe，这样服务器返回的消息就会显示在iframe上

3. HTML5特性实现Ajax上传

1. 使用已有的form表单，来实例化FormData对象

    var form = document.getElementById('form');
    var formData = new FormData(form);

   1. 此外，可以使用append来添加更多的信息

    var img = document.getElementById('img').files[0];
    var formData = new FormData();
    formData.append('img',img);

   1. 利用XHR上传图片

    var xhr = new XMLHttpRequest();
    xhr.open('POST',url);
    xhr.onreadystatechange = function(){};
    xhr.send(formData);

   1. 使用XHR2可以获取上传的进度

    xhr.upload.ongress = function(evt){
        console.log(evt);
        var loaded = evt.loaded; //已经上传的大小
        var total = evt.total;//附件总大小
        var per = Math.floor(100 * loaded / total );//已经上传的百分比
    }

4. 检验图片信息

HTML5提供了一些属性来检索图片信息后缀，即file对象的信息

• name 名字
• size 大小
• type 类型
• lastModified 最后上传的时间毫秒

例子

<input type="file" id="img" name="img">

获取file对象

var img = document.getElementById('img');
var files = img.files;
var file = files[0];