最近不是特别忙，我就利用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="20" max="100"></progress>

<span id="percent"></span>

<p id="uploadSpeed"></p>

<ul id="imageBox">

</ul>

<script type="text/javascript">

//定义获取对象的方法

function $(id) {

    return document.getElementById(id);

}

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>

上传的效果如下：

PHP的代码如下：

<?php

$file_path = "upload/".$_FILES['FileData']['name'];

$returnMsg="{status:true}";

move_uploaded_file( $_FILES["FileData"]["tmp_name"], $file_path);

echo $returnMsg;

?>

html5 ajax多图片可预览上传图片的更多相关文章

  1. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  2. 图片本地预览 flash html5

    dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...

  3. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  4. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  5. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  6. Android 举例说明自己的定义Camera图片和预览，以及前后摄像头切换

    如何调用本地图片,并调用系统拍摄的图像上一博文解释(http://blog.csdn.net/a123demi/article/details/40003695)的功能. 而本博文将通过实例实现自己定 ...

  7. 巧用weui.gallery()，点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  8. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

  9. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

随机推荐

  1. go语言中常用的文件和文件夹操作函数

    package main; import ( "os" "log" "time" "fmt" ) //一些常用的文件操作 ...

  2. VFIO简介 （转载）

    VFIO简介 LTCChina | Nov 20 2013 | Comment (1) | Visits (15204) 概述 VFIO是一套用户态驱动框架,它提供两种基本服务: 向用户态提供访问硬件 ...

  3. gdal source code c++ make windows

    下载源码 GDAL源代码下载地址:http://trac.osgeo.org/gdal/wiki/DownloadSource,或者安装svn从源代码服务器下载,svn地址是:http://svn.o ...

  4. iOS最全的常用正则表达式大全

    很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,包括校验数字.字符.一些特殊的需求等等.给自己留个 ...

  5. git的命令详解

    # git三个区 + 工作区: 写代码的地方 + 暂存区: 暂时存储代码 + 仓库区: 代码提交到了仓库区,就生成一条历史记录(版本) 工作区===> 暂存区 ===> 仓库区 # git ...

  6. 0 or 1,1 and 0

    最近小编遇到很头疼的的一件事 就是以下这几道运算题 ,以下结果是小编经过大量的运算得出的 一.或运算 1.0 or 1 结果为:1 2.1 or 0 结果为:1 3.1 or 2 结果为:1 4.2 ...

  7. LibreOJ #6002. 「网络流 24 题」最小路径覆盖

    #6002. 「网络流 24 题」最小路径覆盖 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:Special Judge 上传者: 匿名 提交提交记录统计讨论测 ...

  8. python基础之Day5

    一.基本概念 为什么要有数据: 计算机能够像人一样识别现实生活中的状态是因为计算机事先将数据存到了记忆中 为什么要分类型: 满足现实世界不同状态的需要 二.数据类型(研究定义,作用,常见操作) 1.整 ...

  9. python爬虫之urlError异常处理

    1.URLError URLError产生的原因: (1)网络无连接,即本机无法上网 (2)连接不到特定的服务器 (3)服务器不存在 import urllib.request import urll ...

  10. JVM 目录

    JVM 目录 走进 JVM Java 虚拟机规范(Oracle 官网) Java 虚拟机规范(Java SE 7 中文版) (周志明等译) 周志明,深入理解Java虚拟机[M],机械工业出版社,201 ...