html5 手机上传图片-HTML5实现图片文件异步上传

bendan520 html5

2023-08-26 0 3,589 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

原文：HTML5实现图片文件异步上传

使用HTML5的新特性异步上传文件非常简单方便。本文主要展示JS部分和html结构。以下代码没有使用第三方库。如果有参考，请注意一些未完全显示的代码片段。我这边的效果预览：

1. 文件未被选中 2. 文件被选中

HTML代码部分：

想法：在下面的代码中，我使用css的z-index属性来隐藏id=btnSelect元素下的input="file"标签。触发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中生成图片预览html5 手机上传图片，添加img元素html5 手机上传图片，然后使用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 = "";
    };

JS Ajax请求部分：

说明：选择第一个tap文件修改画面，满足验证条件后执行预览。第二屏点击是点击btnSelect时点击弹窗的响应。最下面的一个是屏幕点击确认上传按钮并开始发送 Ajax 请求。这里的createXHR()方法是创建一个XMLHttpRequest对象。我还没有发布代码，包括 addEventListener() 方法。这两部分你可以参考其他文章。

    //监听图片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);
            }
        }    
    });