HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便，本文主要展示JS部分，html结构。下面的代码并未使用第三发库，如果有参照，请注意一些未展现出来的代码片段。我这边的效果预览：

1.文件未选择 2.文件已选择

HTML代码部分：

　　思路：下面代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素下面，通过触发a标签的点击后，弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层，避免用户重复点击确认按钮。

    <div id="wp" class="warpper">                        <a id="btnSelect">单击选择要上传的照片</a>            <input id="uploadFile" type="file" name="myPhoto" />                    <button id="btnConfirm" class="btn" >确认上传</button>            </div>    <div id="maskLayer" class="mask-layer" style="display:none;">        <p>图片正在上传中...</p>    </div>

JS图片文件验证部分：

验证部分为：大小，是否已经选择，文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径，依次验证是否为空，文件类型以及文件大小，不满足条件则一律返回

false,满足以上3个条件后，在dom中生成图片预览，添加img元素，然后利用createObjectURL()方法获取预览路径。

代码：

    //获取数据的URL地址    function createObjectURL(blob) {        if (window.URL) {            return window.URL.createObjectURL(blob);        } else if (window.webkitURL) {            return window.webkitURL.createObjectURL(blob);        } else {            return null;        }    }        //文件检测    function checkFile() {        //获取文件        var file = $$("uploadFile").files[0];                                    //文件为空判断        if (file === null || file === undefined) {            alert("请选择您要上传的文件！");            $$("btnSelect").innerHTML = "单击选择要上传的照片";            return false;        }                //检测文件类型        if(file.type.indexOf('image') === -1) {            alert("请选择图片文件！");            return false;        }                //计算文件大小        var size = Math.floor(file.size/1024);                if (size > 5000) {            alert("上传文件不得超过5M!");            return false;        };                //添加预览图片        $$("btnSelect").innerHTML = "<img class=\"photo\" src=\""+createObjectURL(file)+"\"/>";    };

JS Ajax请求部分：

说明：第一个监听文件选择更改事件，满足验证条件后则执行预览，第二个事件监听为监听单击btnSelect时弹出窗口的响应，下面的则是确认上传按钮的事件监听，开始发送Ajax请求。此处的createXHR()方法为创建XMLHttpRequest对象，代码我并未贴出，包括addEventListener()方法，这2个部分可以参考其他文章。

    //监听图片URL地址更改    addEventListener($$("uploadFile"), "change", function() {                            checkFile();    });        //监听单击文件选择按钮    addEventListener($$("btnSelect"), "click", function() {        //弹出文件选择框        $$("uploadFile").click();    });    //监听确认上传按钮的点击事件    addEventListener($$("btnConfirm"), "click", function(e) {                if (checkFile()) {                    try {                //执行上传操作var xhr = createXHR();                $$("maskLayer").style.display = "block";                xhr.open("post","/uploadPhoto.action", true);                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");                xhr.onreadystatechange = function() {                    if (xhr.readyState == 4) {                        var flag = xhr.responseText;                        if (flag == "success") {                            alert("图片上传成功！");                        } else {                            alert("图片上传成功！");                        };                                                $$("maskLayer").style.display = "none";                    };                };                //表单数据                var fd = new FormData();                fd.append("myPhoto", $$("uploadFile").files[0]);                //执行发送                        xhr.send(fd);                        } catch (e) {                console.log(e);            }        }        });        

 

以上则为全部主要代码部分，如果有什么问题可以联系我，欢迎交流。