欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5实现图片文件异步上传

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

 

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

 

 

 

html代码部分:

 

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

 

复制代码

    <p id="wp" class="warpper">            

            <a id="btnselect">单击选择要上传的照片</a>

            <input id="uploadfile" type="file" name="myphoto" />        

            <button id="btnconfirm" class="btn" >确认上传</button>        

    </p>

    <p id="masklayer" class="mask-layer" style="display:none;">

        <p>图片正在上传中...</p>

    </p>

复制代码

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

            }

        }    

    });        

复制代码

 

 

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