开发者社区> 杰克.陈> 正文

HTML5实现图片文件异步上传

简介: 原文:HTML5实现图片文件异步上传    利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构。下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段。
+关注继续查看
原文: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);
            }
        }    
    });        

 

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html_列表_图片
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53959369 ...
733 0
Html5 学习系列(四)文件操作API
原文:Html5 学习系列(四)文件操作API 引言     在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立,不够通用。
706 0
C# 使用FileUpload控件上传图片,将文件转换成二进制进行存储与读取
状况描述:   需要上传文件,但是不想要保存到实体路径下,便可以用该功能来实现。   效果图:      点击【Upload】按钮,上传文件到数据库;   点击【Preview】,预览文件;   具体实现:   前台: 1 2 3 4 : 5 ...
1764 0
HTML5 FormData实现文件上传实例
原文:HTML5 FormData实现文件上传实例 表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。
1329 0
JQuery文件上传及以Base64字符串形式呈现图片
一:上传之 首先,你必然得有一个 file input,如下:         其次,让我们 upload,如下: $.ajaxFileUpload({     url: '@ViewBag.
572 0
Nginx 实现图片或文件的防盗链
一:一般的防盗链如下: location ~* \.(gif|jpg|png|swf|flv)$ {    valid_referers none blocked www.
1065 0
html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
744 0
html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出...
1057 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载