html5 手机上传图片

简介:

最近不是特别忙,就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览多图片上传,上传进度条(利用html5的progress标签做的),上传网速等,像删除选中的照片,重新选择照片,继续选择照片等简单的功能我就没写(直接按逻辑修改代码中的uploadImgArr数组即可),另外可以根据图片的类型fileType,大小file.size来限制上传图片的类型。
PS:由于我的空间流量有限,顾没有把在线的demo告诉你们,呵呵,如果有需要例子的,可以留言联系我。
html5 ajax上传图片的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5上传图片</title>
<style type="text/css">
li{list-style:none}
li img{width:100px}
.tips{color:red}
</style>
</head>
<body>
<p>注意图片太小的话,看不到进度条</p>
<input type="file" id="filesInput" multiple />
<br><br>
<a href="javascript:;" id="btnUpload">开始上传</a>
<p id="info"></p>
<label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>
<span id="percent"></span>
<p id="uploadSpeed"></p>
<ul id="imageBox"></ul>
<script type="text/javascript">
//定义获取对象的方法
function $(objectId) {
  if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
  } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
  } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
  } else {
return false;
  }
var filesInput = $("filesInput"),
    info = $("info"),
    imageBox = $("imageBox"),
    btnUpload = $("btnUpload"),
    progress = $("Progress"),
    percent = $("percent"),
    uploadSpeed = $("uploadSpeed");
//定义存放图片对象的数组
var uploadImgArr = [];
//防止图片上传完成后,再点击上传按钮的时候重复上传图片
var isUpload = false;
//定义获取图片信息的函数
function getFiles(e) {
    isUpload = false;
    e = e || window.event;
    //获取file input中的图片信息列表
    var files = e.target.files,
    //验证是否是图片文件的正则
    reg = /image\/.*/i;
    //console.log(files);
    for (var i = 0,f; f = files[i]; i++) {
        //把这个if判断去掉后,也能上传别的文件
        if (!reg.test(f.type)) {
            imageBox.innerHTML += "<li>你选择的" + f.name + "文件不是图片</li>";
            //跳出循环
            continue;
        }
        //console.log(f);
        uploadImgArr.push(f);
        var reader = new FileReader();
        //类似于原生JS实现tab一样(闭包的方法),参见http://www.css119.com/archives/1418
        reader.onload = (function(file) {
            //获取图片相关的信息
            var fileSize = (file.size / 1024).toFixed(2) + "K",
            fileName = file.name,
            fileType = file.type;
            //console.log(fileName)
            return function(e) {
                //console.log(e.target)
                //获取图片的宽高
                var img = new Image();
                img.addEventListener("load", imgLoaded, false);
                img.src = e.target.result;
                function imgLoaded() {
                    imgWidth = img.width;
                    imgHeight = img.height;
                    //图片加载完成后才能获取imgWidth和imgHeight
                    imageBox.innerHTML += "<li><img src='" + e.target.result + "' alt='" + fileName + "' title='" + fileName + "'> 图片名称是:" + fileName + ";图片的的大小是:" + fileSize + ";图片的类型是:" + fileType + ";图片的尺寸是:" + imgWidth + " X " + imgHeight + "</li>";
                }
            }
        })(f);
        //读取文件内容
        reader.readAsDataURL(f);
    }
    //console.log(uploadImgArr);
}
if (window.File && window.FileList && window.FileReader && window.Blob) {
    filesInput.addEventListener("change", getFiles, false);
} else {
    info.innerHTML = "您的浏览器不支持HTML5长传";
    info.className="tips";
}
//开始上传照片
function uploadFun() {
    var j = 0;
    function fun() {
        if (uploadImgArr.length > 0 && !isUpload) {
            var singleImg = uploadImgArr[j];
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                //进度条(见http://www.css119.com/archives/1476)
                xhr.upload.addEventListener("progress",
                function(e) {
                    if (e.lengthComputable) {
                        progress.value = (e.loaded / e.total) * 100;
                        percent.innerHTML = Math.round(e.loaded * 100 / e.total) + "%";
                        //计算网速
                        var nowDate = new Date().getTime();
                        var x = (e.loaded) / 1024;
                        var y = (nowDate - startDate) / 1000;
                        uploadSpeed.innerHTML = "网速:" +(x / y).toFixed(2) + " K\/S";
                    } else {
                        percent.innerHTML = "无法计算文件大小";
                    }
                },
                false);
                // 文件上传成功或是失败
                xhr.onreadystatechange = function(e) {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200 && eval("(" + xhr.responseText + ")").status == true) {
                            info.innerHTML += singleImg.name + "上传完成; ";
                            //因为progress事件是按一定时间段返回数据的,所以单独progress不可能100%的,在这设置传完后强制设置100%
                            progress.value = 100;
                            percent.innerHTML = "100%";
                            isUpload = true;
                        } else {
                            info.innerHTML += singleImg.name + "上传失败; ";
                        }
                        //上传成功(或者失败)一张后,再次调用fun函数,模拟循环
                        if (j < uploadImgArr.length - 1) {
                            j++;
                            isUpload = false;
                            fun();
                        }
                    }
                };
                var formdata = new FormData();
                formdata.append("FileData", singleImg);
                // 开始上传
                xhr.open("POST", "upload.php", true);
                xhr.send(formdata);
                var startDate = new Date().getTime();
            }
        }
    }
    fun();
}
btnUpload.addEventListener("click", uploadFun, false);
</script>
</body>
</html>

上传的效果如下:

PS:也许你以为html5离我们还很遥远,但是在内部项目中(对浏览器兼容性要求不高)已经广泛开始应用了,看我在百度壁纸管理系统项目中html5上传壁纸的截图:


PHP的代码如下:

<?php
$file_path = "upload/".$_FILES['FileData']['name'];
$returnMsg="{status:true}";
move_uploaded_file( $_FILES["FileData"]["tmp_name"], $file_path);
echo $returnMsg;
?>












本文转自ljianbing51CTO博客,原文链接:http://blog.51cto.com/ljianbing/1607030 ,如需转载请自行联系原作者



相关文章
|
3月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
73 0
|
1天前
HTML图片
【10月更文挑战第4天】HTML图片。
12 2
|
3天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
22 1
|
19天前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
32 5
|
1月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
39 13
|
5月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
2月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
31 0
在线将多张图片拼接起来图工具HTML源码
|
2月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
25 2
|
3月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
99 1
|
2月前
|
存储 移动开发 JavaScript
html5手机Web单页应用实践--起点移动阅读
html5手机Web单页应用实践--起点移动阅读