让美的事情发生
Ziv 小威
HTML5 实现图片文件异步上传

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

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

html5-upload html5-upload2

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);
        }
    }
});

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


最后修改于 2014-05-26

Comments powered by Disqus